0

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>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Sougata Mukherjee
  • 547
  • 1
  • 8
  • 22
  • Similar subject: [img src svg changing the styles with css](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css). Also from Css-tricks: [Change color of SVG on hover](https://css-tricks.com/change-color-of-svg-on-hover/) – MaxiGui Apr 21 '22 at 09:36
  • here not only one images hovering but with text also – Sougata Mukherjee Apr 21 '22 at 09:40
  • The text is not the problem... The svg as image url is. So it is duplicate. Good luck – MaxiGui Apr 21 '22 at 09:40
  • You won't be able to change the fill of an image. Use an svg element instead – enxaneta Apr 21 '22 at 09:44

2 Answers2

0

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

Kristesiashvili
  • 19
  • 3
0

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!

nicedev666
  • 56
  • 5