Search code examples
csscss-selectorspseudo-class

:hover pseudoclass doesn't work with universal selector *

If I write

h1:hover, li:hover {color:green;}

Both h1 and li elements get the hover effect.

Buf if I write: 

*:hover {color: green;}

This has effect only on anchor elements.

Does :hover pseudoclass not work with universal selector?

Solution

  • It does work. The catch is that all the text on your page ends up turning green because the body element is also matched, so you don't see a "mouse-over" effect as long as your cursor is anywhere on the viewport (i.e. the page body). You can work around this either by not using the universal selector (I mean, why would you?) or by specifying a body:hover color.

    If you see a hover effect only on a elements, you probably have an a:hover style somewhere that's overriding your *:hover style as the universal selector is less specific than a type selector (that is, not specific at all). But the rest of your text should always be green until you take the cursor out of the viewport, for instance by moving it to the browser chrome or away from the window. (Note that the "viewport" in the fiddle I link to in my comment is an iframe.)