Preventing SVG colors from changing upon clicking a specific region

I need help with maintaining the color of my SVG map without it changing after clicking on an area. The issue is that it ends up looking like a hyperlink even after being visited.

.mapdiv {
max-width: 45%;
height: auto;
margin: auto;
width: auto;
stroke: #a9a9a9!important;
stroke-width: 2px;
stroke-linejoin: round;
fill: #5d6675;!important;}

.mapdiv path {
opacity: .85;
cursor: pointer;
-webkit-transition: all 150ms;
-moz-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms; }

.mapdiv :hover {
stroke-width: 3px;
stroke-linejoin: round;
fill: #c9b394!important;
cursor: pointer; }

View my SVG map showing changes after clicking on areas

Answer №1

It's funny how sometimes the simplest solutions can fix a problem. I was struggling with some bad habits in my CSS, but after removing all instances of !important, the issue magically resolved itself. It just goes to show that sometimes less is more when it comes to coding.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My button is overflowing its container in Bootstrap 5, how can I fix this issue?

I've been experiencing an issue with the button in my code. It keeps extending outside of the parent div container, regardless of the screen size. <header class="header"> <div class="hero text-white pt-7"> <div ...

What is the best way to set a minimum width for websites with relative (%) widths that are compatible with IE6 and above?

I am working on a website where I utilize percentages (%) for widths to create a flexible layout. However, I am encountering an issue where everything breaks at a certain width, such as 800px. Is there a way to set a maximum width of 800px and then displa ...

Any particular reason for Bootstrap v5 switching class names from .ml .mr to .ms .me?

I'm curious if anyone can explain the reasoning behind Bootstrap v5 changing the names of classes that are widely used? ...

Is there a way to display a floating image in Rmarkdown HTML output?

Looking for a way to have my company's logo floating at the top of an rmarkdown file with html output. Is there a method similar to the floating table of contents in rmarkdown? ...

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

When HTML is outside of the root web directory, it is unable to access any files

My files for html, css, and javascript are structured within the /www/ directory in their own respective folders (/www/html, /www/css, /www/js). The web root is located at /www/www/ When using the readfile function in my PHP code like this: readfile(" ...

Drop and drag the spotlight

On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area. I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't se ...

What approach should I take, CSS or javascript/jQuery, to create a 3D effect for my website's navigation bar?

Many companies seem to have a unique design element where the grey bar on top appears slightly "rounded" rather than flat. I assume there is more to achieving this effect than just using background: grey in CSS. How can I make it look like it protrudes s ...

Adjusting the gridview headers to line up with a specific item and shifting the content of the item to the right

I am struggling with aligning the header and content in my gridview. I want the shirts to be underneath the header item, with the description moved to the left and the price 336 moved to the right. Something like this: https://i.sstatic.net/2i2IR.png Her ...

Unable to modify the height and color of tabs in Angular 6

I am in the process of learning Angular, CSS, and HTML. I have been using MatTabsModule to create tabs, but I am having trouble adjusting the height, background, and other properties of the tabs. I am struggling to override the default properties of MatTab ...

What is the best way to display multiple divs in a single location?

I am facing an issue with displaying different text on mouseover for three buttons. I successfully implemented it for one button, but when I added the other two, it stopped working. Here is the code I used for the first button: Using jQuery- document.get ...

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

Steps to resolve columns wrapping around the screen too tightly instead of properly fitting into place

I am currently working on a website and trying to display an image preview alongside a block of text using Bootstrap 4. However, I am facing an issue where the columns wrap around the screen, resulting in a row that appears two columns tall. Despite my at ...

Adjust the browser viewport to the toggled block's position

I am facing an issue with my ul blocks and buttons that toggle their content. When I click the button to show the content, everything works fine. However, when I scroll down and click the button again to hide the content, the browser screen jumps to the bo ...

Altering an element's visibility from 'none' will trigger its animation to play once again

Take a look at the snippet below and you'll see that the sliding animation plays twice - once when the .addClass statement runs, and again when #test's display is switched to 'initial' (timeouts are in place to help visualize the issue) ...

Align a single item to the right in PrimeNG p-menubar

I am currently utilizing PrimeNG 8.1.1 and I am looking for a way to align one of the items to the right side (specifically the submenu options of logout and profile). Does anyone have any suggestions? this._menuItems = [ { labe ...

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

"Clicking on the radio button does not activate when placed within an <a> tag

Why is it that when the text is clicked, the radio button is checked, and when the little green patch is clicked, the frame is working, but they both don't work at the same time? Any assistance in resolving this issue would be greatly appreciated. ...