Reset svg fill in css

Question

I want to have all my svgs to have the same plain color. So I use

svg *{
   fill: #ccc;
}

But I want to get default fills on :hover. How can I disable the fills and get defaults back?

Answer 1

You can do this using :not() and effectively style "not hovered".

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

The above might work, here's a quick CodePen that you can play with: http://codepen.io/anon/pen/rrqyAx

You can learn more on the Mozilla Dveloper Network entry for :not()

Alternatively (I was curious) you could use fill:inherit - which is just as valid. In this case, the color used will be inherited from the fill value of the parent svg, which can be set in css also.

svg *:hover{
  fill : inherit;
}

I've added an svg styled in this manner to the CodePen.