悬停另一个元素时更改SVG填充颜色

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>

Answer 1

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> 

Answer 2

Have you tried to use the SVG inline, instead of having it as a source or data attribute on an element?

EDITED with updated article: https://css-tricks.com/svg-use-with-external-reference-take-2/