按钮由本地导入SVG的图标和文字组成,如何实现当鼠标悬停在按钮时 svg图标与文字同时改变颜色?
时间: 2023-08-23 20:08:08 浏览: 165
用vc实现会变色的按钮
4星 · 用户满意度95%
可以使用CSS实现这个效果。首先,给按钮的SVG图标和文字分别添加一个class,如“icon”和“text”。然后,在CSS中使用:hover伪类选择器,为按钮的:hover状态下的“icon”和“text”添加颜色样式,如下所示:
```
.button:hover .icon {
fill: #ff0000; // 改变SVG图标颜色
}
.button:hover .text {
color: #ff0000; // 改变文字颜色
}
```
这样,在鼠标悬停时,按钮上的SVG图标和文字颜色就会同时改变。
阅读全文