Change color of svg polygon on hover

Question

I want to change the color of each polygon of the svg on hover using css.

This is the hmtl code:

When I hover one of the polygons, its filling should turn to #000.

I've already tried to change to color using the id:

/*This does not work*/
#N:hover {
    fill: #000;
}

I found this solution using jquery, but I wonder if this can be achieved using pure css: my svg polygons fills are not changing color on hover

user_12981658 · Answer

Yes because you have inlined style in your svg. You can keep it and add !important to your css

#N {
fill: #000 !important;
}

or do the following

#N{fill: #000;}

And if you want the fill to change on hover just add :hover to #N

#N:hover {
fill: #000 !important;
}

OR

#N:hover{fill: #000;}

user_1038015 · Answer

The hover isn't specific enough.

#N:hover {
    fill: red;
}

user_13143265 · Answer

Here is how i figured out how to do it:

This is the styling

#N:hover {
    fill: #000;
}

#NE:hover {
    fill: #000;
}

#NE {
 fill: #fff;
}
#N {
 fill: #fff;
}

user_4398966 · Answer

when you use inline style you need to use !important

#N:hover,#NE:hover {
    fill: black!important;
}