CSS 中 :hover 失效的原因
1.在设置 :hover 前加空格
代码登录后可见
说明:鼠标经过 class 为 one 的时候背景不变,而经过 one 里面的其他 div 背景颜色发生变化。故 :hover 前加空格,本身不会有 :hover的效果,而后代元素会有 :hover 的效果。
2.只有后代元素和兄弟元素才有效果,其他的 :hover 会失效
1.后代元素
代码登录后可见
说明:直接使用:hover
2.兄弟元素(紧接在元素后的兄弟元素)
代码登录后可见
说明:通过使用 + 来实现,把 “+” 号去掉,就不能达到效果了。
3.兄弟元素(未紧接在元素后的兄弟元素)
代码登录后可见
说明:通过使用 ~ 来实现,把 “~” 号去掉,就不能达到效果了。
3.hover 被置于 :link 和 :visited 之前