CODEWITHSUNDEEP
cssd3.jssvg
arcee123
arcee123

Reputation: 211

How to set a CSS hover to a SVG map

I'm using this example:

https://bl.ocks.org/mbostock/raw/3306362/

How do I add a hover to the counties? I've tried:

.counties:hover {
    fill:red;
}

path d:hover {
    fill:red;
}

and some several others. no luck. Thanks.

Upvotes: 2

Views: 370

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Two problems:

  1. counties is the class of the <g> element, not the paths. So, first set a class (like county) for each path;

  2. This is your main problem here: there is a style() for those paths in the D3 code, which is therefore a subsequent rule. So, if you want your CSS rule to override that subsequent rule, use !important:

    .county:hover {
    fill: red !important;
}

Or, alternatively, change that style() in the code for an attr().

Don't use path:hover, since there are paths for the states as well. Also, there is no d element (path d:hover in your question) neither in HTML nor in SVG. d is a path's attribute.

Here is the updated bl.ocks with those two changes: https://bl.ocks.org/anonymous/9ebef1b8e2a11bd170c50bb4a3440628/8923484fd3715aa474f1eb31184d11da863e24dc

Upvotes: 2

Related Questions