重置 svg 填充 css

Question

我想让我的所有 svg 都具有相同的纯色。所以我用

svg *{
   fill: #ccc;
}

但我想在 :hover 上获得默认填充。如何禁用填充并恢复默认值？

Answer 1

您可以使用:not() 执行此操作并有效地设置“未悬停”的样式。

svg *:not(:hover){
  fill: #ccc;
}

以上方法可能有效，这里有一个快速的 CodePen，您可以使用：http://codepen.io/anon/pen/rrqyAx

您可以通过Mozilla Dveloper Network entry for :not()了解更多信息

或者（我很好奇）您可以使用 fill:inherit - 这同样有效。在这种情况下，使用的颜色将继承自父 svg 的填充值，也可以在 css 中设置。

svg *:hover{
  fill : inherit;
}

我在 CodePen 中添加了一个以这种方式设置样式的 svg。