我有一个 SVG 格式的图标列表,我正在 Web 应用程序上使用它。
图标前景色是黑色的,我想在鼠标悬停时使用 CSS 将此颜色更改为白色。使用 CSS 执行此操作的最简单方法是什么(如果可能?)
HTML 标记如下:
<img class="icon" src="user.svg">
CSS
.icon {
width: 200px;
height: auto;
}
.icon:hover {
fill: #fff; /* this doesn't work */
}
最佳答案
.icon {
width: 200px;
height: auto;
}
.icon:hover {
filter: invert(100%);
}
.teste {
background-color: lightblue;
}
<div class="teste">
<img class="icon" src="https://image.flaticon.com/icons/svg/358/358269.svg">
</div>
悬停时只需添加
.icon:hover {
filter: invert(100%);
}
关于html - 使用 CSS 添加带有颜色叠加的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43987076/