Change SVG Fill Color on hover of another element

Question

I've been researching for quite some time today on how to change an svg fill color on hover. I've been able to make it work by using an object tag and linking to my CSS file so that I can style it externally. However I can only get this to work when I actually hover over the SVG itself. I have my object and a text label within an tag and would like to change the fill of the SVG and the color of the text label at the same time while hovering the . When I try targeting further up from the object it doesn't work. I believe I read that an SVG inside an object won't recognize any parent elements so I'm not sure if that's the problem. Any help would be appreciated! Below is a snippet of my html. I should point out the class "icon-md" is only defining the height and width of my SVG.

<div class="icon-button">
            <a href="#">
                <object type="image/svg+xml" class="icon-md" data="img/load-board.svg"></object><h3 class="icon-label">Load Board</h3>
            </a>
        </div>

Here is also the HTML of my SVG file. I gave the actual path an id of "path" and that is what I am specifically targeting in my external CSS file.

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>

Solution

Were you thinking of something like that ?

div{
  padding:10px;
  border:1px solid black;
}
div:hover svg path,
div:hover{
  fill:red;
  color:red;
}

<div>
This is plain text
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>
</div>

Comments

[Robert Longson]

you'd need to do this within load-board.svg but you haven't shown us that.

[lblankenship]

I'm trying to avoid that because the project I'm working on will most likely have quite a few SVGs per page and there will probably be hundreds of pages. So from a maintenance standpoint I don't think that would be best for me.

[Wade Hammes]

I'm confused...if you are referencing it from an external resource in the data attribute in the object, why not just use <svg class="icon-md"><use xlink:href="img/load-board.svg"></use></svg>?

[lblankenship]

When using what you just referenced my SVG doesn't show at all for some reason. I went through this article svgontheweb.com and used the object method that was listed and I was able to do what they were saying and change the fill on hover. However I want to hover a completely different element and change my SVG color rather than having to hover the SVG itself. I should also say, the class icon-md is only defining the size of the SVG. I actually updated the html within the SVG file and gave the path an id of "path" which is what I reference in my CSS for the :hover event.

[lblankenship]

Yes! This behaves how I want. However I noticed you put the SVG code directly within the HTML. Do you know if it is possible to accomplish this using the <object> method so the SVG code won't have to be put into the HTML everytime it is referenced? If not I can just move forward with this solution as it still accomplishes the end result I want.

[Robert Longson]

@lblankenship you can put it in the object but you need to make the svg file reference the CSS directly, having the html reference the CSS won't work.

[lblankenship]

@RobertLongson so you're saying I would need my CSS directly within the SVG file? I already have a reference to my external CSS file however I was only able to get it to work on hover of the SVG itself.

[Robert Longson]

@lblankenship You could include it via xml-stylesheet as you are doing.

[lblankenship]

@RobertLongson Hmm. My problem I guess was that I wasn't able to properly target the path whenever I tried object svg #path (I tried other parent/child paths too) it wouldn't apply the necessary styles when I hovered over the <a> surrounding the object. It would work for the label within the <a> but the svg only worked when I changed my css to apply the styles when I hovered over the SVG specifically.