开发者

:hover pseudoclass doesn't work with universal selector *

开发者 https://www.devze.com 2023-02-20 05:30 出处:网络
If I write h1:hover, li:hover {color:green;} Both h1 and li elements get the hover effect. Buf if I write:

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.

Demo: jsfiddle.net/Marcel/cTpxS

0

精彩评论

暂无评论...
验证码 换一张
取 消