: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开发者_StackOverflow中文版 with universal selector?
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.)
What browser are you talking about? Neutralising html:hover
and body:hover
demonstrates that the remaining elements change accordingly on hover, in Chrome at least and I'm sure any other modern browser.
精彩评论