Search code examples
svgrollovers

Targeting a g id in an SVG for rollovers

I'm working with an SVG file that has been output from Adobe Illustrator, so there is probably quite a bit of unnecessary code. After searching and searching I was able to come up with this.

<?xml-stylesheet type="text/css" href="SVG_css.css"?>

path:hover{
fill:#005289;
}

which gets the rollovers to work from the external stylesheet, but it of course targets every path as a rollover.

For instance, I need to target paths in a group so three elements highlight when rolled over. here is the code structure from Illustrator.

    <g id="WIRE_ROOM">
    <path fill="#BCBEC0" d="M357.3,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
        V24.4z"/>
    <path fill="#BCBEC0" d="M357.3,51.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
        V51.4z"/>
    <path fill="#BCBEC0" d="M376.7,24.4c0,0.6-0.6,1-1.4,1h-8.1c-0.8,0-1.4-0.5-1.4-1v-8.9c0-0.6,0.6-1,1.4-1h8.1c0.8,0,1.4,0.5,1.4,1
        V24.4z"/>
</g>

I've tried associating the ID to the stylesheet, and didn't have any luck...I also tried associating a class directly into the SVG.

If I add class="locations" to the path it of course only rolls over that one element and not the group of elements. When I added the class like this nothing happened. g id="WIRE_ROOM" class="locations"

I would appreciate if someone could assist me with this, as I've searched and tried everything I know to try.

So in the case of "WIRE_ROOM" those are different pieces of equipment, and I need the hover to highlight all 3 of those areas to signify one common area. Thank you!

Solution

  • For future reference, the selector you're looking for is g#WIRE_ROOM:hover path or g.locations:hover path (I'd recommend using the class instead of an ID).

    The hover state on the group is triggered when any of the child elements are moused-over, and then the selector applies the hover style to all the child paths.

    You have to specifically mention the paths in the selector -- you can't rely on inheritance -- because your file directly sets fill colors on the paths, which takes precedence over any inherited style.