0
100
Viewshow to hover svg and text both at a time
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 this
.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>
·
Juan Pablo Isaza
2 answers
Answer question0
Try using filter instead of fill. https://isotropic.co/tool/hex-color-to-css-filter/ This can help with color conversion.
·
Juan Pablo Isaza
Report
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!
·
Juan Pablo Isaza
Report
Answer question