重置 svg 填写 css

Question

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

svg *{
   fill: #ccc;
}

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

Answer 1

您可以使用 :not() 并有效地设置样式 "not hovered"。

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。