代码之家 › 专栏 › 技术社区 › Sougata Mukherjee

如何同时悬停svg和文本

svg reactjs css html javascript

Sougata Mukherjee · 技术社区 · 2 年前

.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>

2 回复 | 直到 2 年前

nicedev666 2 年前

您应该尝试将svg直接作为svg加载,而不是作为图像加载。这样,您就可以直接访问css中的svg变量。

.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 */

试试看这是否管用!