'how to hover svg and text both at a time [duplicate]

I imported a svg image and create a box containing icon and text.so when we want to hover on box all color changes to yellow color but svg is not changes how to resolve that if we hover on the box then text as well icon should change with yellow color, now I am getting thisenter image description here

.h:hover{
  color:yellow;
  fill:yellow;
}
<span class='h' style={{border:'2px solid',height:'20px'}}><img src="https://assets.codepen.io/3/kiwi.svg" class="icon"  width="15px"/><span>Text</span></span>
javascripthtmlcssreactjssvg


Solution 1:[1]

You should try loading your svg directly as an svg, and not as an image. That way you can directly access your svg variables in your css.

.h:hover {
  color:yellow;
  fill:yellow;
}

.h:hover svg, .h:hover path {
 fill: yellow;
}
/* Depending on your svg, it is possible that you have to set the fill in the path, check your svg */

Try if this works!

Solution 2:[2]

Try using filter instead of fill. https://isotropic.co/tool/hex-color-to-css-filter/ This can help with color conversion.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nicedev666
Solution 2

Related Questions