如何在作为SVG图标的元素上添加悬停效果,该元素还可以更改图标本身的颜色。
这是我现在有两个选项,使用掩码图像或显示图标作为背景。
在CSS中使用background的问题,在悬停时显示是正确的,但是我不能改变图标的颜色。
.icon {
display: inline-block;
background: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') no-repeat center; /* imagine the file here as an SVG file */
b
我有以下html结构:
<span>
<label>
<input this is my button's area />
<span> this is the svg icon</span>
</label>
</span>
我有一个影响我的输入的jQuery悬停事件,并且跨度绝对位于输入区域内,所以它在视觉上位于它的上方。
hover事件会更改输入类,因此我可以更改按钮的颜色,但是当鼠标移到包含图标的跨度上时,输入中的悬停类会按预期关闭,并且按钮看起来不是活动的。
有没有一