Html CSS和在悬停时更改SVG图标

这是我的boostrap菜单中的菜单项：

<li class="nav-item">
 <a href="#" class="icon"><span class="number">1</span>
   <img src="images/svg-icons/notifications-active.svg" alt="" />
 </a>
</li>

如您所见，有一个SVG图像被拉入，其中一个类被附加为“icon”

以下是我认为可以使其切换到不同颜色的CSS：

<style media="screen">
.icon:hover {
    fill: #DA4567;
    }
</style>

.图标：悬停{
填充：#DA4567；
}

你知道我做错了什么吗？它不是这样工作的吗

---

谢谢

在这里可以找到一个提供svg颜色的好工具：

SCSS

.nav-item {
    .icon {
        img {
            transition: all .2s ease-in-out;
        }

        &:hover,
        &:active,
        &:focus {
            img {
                filter: invert(37%) sepia(63%) saturate(1879%) hue-rotate(321deg) brightness(90%) contrast(89%);
                //filter: grayscale(100%);
            }
        }
    }
}

它的工作原理
一篇很棒的文章开始：

基本上，你从一个深色的底色（黑色）开始，用深褐色滤镜引入颜色。然后搭配多个滤镜，尝试匹配十六进制颜色。在大多数情况下，这是一场势均力敌的比赛

浏览器支持
这些天几乎是最新的（>=IE10）：

---

内联SVG

我个人建议您使用内联svg。它们更易于管理，并且由于与页面请求异步加载，因此加载时间也增加了

使用内联svg将允许您直接操作svg元素，甚至是其中的特定路径

。图标：悬停{
填充：#DA4567；
}

您必须使用2个SVG图像。第一个图像使用SVG默认颜色，第二个图像使用SVG悬停颜色。使用两个图像不是一个好主意

你可以用这个；您必须添加JQUERY，svg-img.js

/*
*svg-img.js
*用内联SVG替换所有SVG图像
*/
$（function（）{$（'img.svg'）。每个（function（））{
var$img=$（本）；
var imgID=$img.attr（'id'）；
var imgClass=$img.attr（'class'）；
var imgURL=$img.attr（'src'）；$.get（imgURL，函数（数据）{
//获取SVG标记，忽略其余部分
var$svg=$（数据）.find（'svg'）；//将替换图像的ID添加到新的svg
如果（imgID的类型！==‘未定义’）{
$svg=$svg.attr（'id'，imgID）；
}
//将替换的图像类添加到新的SVG
if（imgClass的类型！==“未定义”）{
$svg=$svg.attr（'class'，imgClass+'replaced svg'）；
}//根据删除所有无效的XML标记http://validator.w3.org
$svg=$svg.removeAttr（'xmlns:a'）；//用新的svg替换图像
$img.replaceWith（$svg）；}，'xml'）；}）；}）

/*
*style.css
*/
.svg{
宽度：100px；
高度：100px；
}svg路径，
svg圆{
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-ms过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
}svg：悬停路径{
填充物：红色；
}

SVG
SVG img标记悬停

您可能会发现它悬停在

li

上，而不是

a

上。尝试

.nav项：hover.icon{

或

.nav项：hover.icon img{

。但是请注意，如果您多次使用

导航项

类，这可能会产生意外的结果，例如影响所述类引用的所有内容，您无法在img标记中设置svg动画。设置svg动画的更好方法是内联或使用中标记，您可以尝试添加“过滤器”而不是“填充”，CSS不会应用跨文档，即它不会不适用于img标签的内容，它们是一个单独的文档。我认为您建议解决svg悬停颜色的额外数量有点太多。好的。但这有助于使用悬停效果在网站的任何位置添加更多图标，无需添加单独的代码（CSS或JavaScript）；只需添加img（svg链接）。