css - :hover pseudoclass doesn't work with universal selector *

Question

如果我写

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

h1 和 li 元素都获得悬停效果。

Buf 如果我写:

*:hover {color: green;} 

这只对 anchor 元素有影响。

:hover 伪类是否不能与通用选择器一起使用？

Answer 1

它确实有效。问题是页面上的所有文本 最终都变成了绿色，因为 body 元素也匹配，所以您看不到“鼠标悬停”效果只要您的光标位于视口(viewport)上的任何位置(即页面主体)。您可以通过不使用通用选择器(我的意思是，为什么要这样做？)或通过指定 body:hover 颜色来解决这个问题。

如果你只在 a 元素上看到悬停效果，你可能在某个地方有一个 a:hover 样式覆盖了你的 *:hover样式作为通用选择器不如类型选择器具体(即根本不具体)。但是你的文本的其余部分应该总是绿色的，直到你把光标移出视口(viewport)，例如将它移到浏览器镶边或远离窗口。 (请注意，我在评论中链接到的 fiddle 中的“视口(viewport)”是一个 iframe。)