Css 更改svg颜色div对话框

我有一个svg图像。当您悬停时，它会更改图标本身的颜色，但它位于60x60的div中，当悬停div时，它不会更改填充颜色

.nav打开链接{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：60px；
高度：60px；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
光标：指针；
}
span svg:hover#导航打开链接，span svg:hover#导航关闭链接{
填充：#fff；
}
span svg#导航打开链接，span svg#导航关闭链接{
过渡时间：300ms；
过渡时间功能：轻松；
-webkit转换：300ms；
-webkit过渡计时功能：轻松；
}

---

如果希望悬停在div上工作，只需将其应用于div而不是路径

有一个类和一个id具有相同的名称有点让人困惑，所以我删除了路径id，因为它似乎不是必需的

.nav打开链接{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：60px；
高度：60px；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
光标：指针；
过渡时间：300ms；
过渡时间功能：轻松；
-webkit转换：300ms；
-webkit过渡计时功能：轻松；
}
.导航打开链接：悬停{
填充：#fff；
}

---

您需要从

svg

中删除

fill

，并在css中添加填充颜色……请参见下面的代码，您将理解

.nav打开链接{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：60px；
高度：60px；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
光标：指针；
}
span svg#导航打开链接，span svg#导航关闭链接{
过渡时间：300ms；
过渡时间功能：轻松；
-webkit转换：300ms；
-webkit过渡计时功能：轻松；
}
svg{
填充：#4F4F；
}
svg：悬停{
填充：#db4344；
}