伪元素:hover
:hover选的是鼠标悬停的元素。
.xxx:hover{}直接选中元素本身
.xxx:hover yyy{} 悬停是选中的是yyy 悬停在yyy上也算选中yyy 可以理解成还是后代选择器的一种,只是祖先元素是在悬停状态下的xxx,而这个选择器是它的后代yyy,就是给祖先元素加了:hover这个限制条件而已啦。这个跟物理空间也没有关系,用display:none跟visibility:hidden的效果是一样的(display:none是不保留元素的物理空间,visibility:hidden是保留元素的物理空间,还在那里只是不显示)。
看了一下别的思路,觉得用继承解释比较能解释通。子元素继承了:hover状态下的父元素的hover状态,所以当在父元素悬停,子元素继承了就显示了,移入子元素时子元素本身也是hover,也能显示。(还是没能讲明白为什么移入子元素离开父元素的时候子元素还能显示。。)
2021/8/8 京东导航条练习
最新推荐文章于 2022-09-25 17:14:05 发布