5

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?

Kotanet
  • 573
  • 1
  • 8
  • 26
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Oct 18 '16 at 10:38

1 Answers1

10

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.

daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
  • 3
    In regards to your second comment, `fill:inherit` will simply return the colour back to the default SVG colour; which 9 times out of 10 is black. It won't return the colours to the original fill colours of the SVG before it was altered. See [this pen](https://codepen.io/anon/pen/POZXgg) where the original `` is `pink`. Hovering merely turns it to its inherited SVG default colour of `black`. – shennan Nov 03 '17 at 10:33
  • @shennan that's what I think was asked, though I agree that this is a worthwhile clarification for others finding this answer. – daveyfaherty Nov 03 '17 at 15:31
  • 1
    `inherit` is not a valid value for `fill` – user487772 Jun 30 '20 at 13:04