html - Change SVG Fill Color on hover of another element -


i've been researching quite time today on how change svg fill color on hover. i've been able make work using object tag , linking css file can style externally. can work when hover on svg itself. have object , text label within tag , change fill of svg , color of text label @ same time while hovering . when try targeting further object doesn't work. believe read svg inside object won't recognize parent elements i'm not sure if that's problem. appreciated! below snippet of html. should point out class "icon-md" defining height , width of 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 html of svg file. gave actual path id of "path" , targeting in 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> 

were thinking of ?

div{    padding:10px;    border:1px solid black;  }  div:hover svg path,  div:hover{    fill:red;    color:red;  }
<div>  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