第一次接触层级选择器总觉得有点麻烦，本来可以用简单的选择器，例如最简单的id选择器就可以选择元素，为什么要用层级选择器，直到遇到帮助菜单的应用场景。
有以下应用需求，当鼠标悬停在文字时，显示图像，离开隐藏，如何实现？
这时候就必须依靠层级选择器了，分析一下，鼠标悬停的位置是文字，修改内容的是文字的邻居图像，在CSS中除了用层级选择器还能有其他的选择吗？似乎没有。
直接上代码。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
display: none;
}
div:hover img {
display: inline-block;
width: 300px;
align-items: initial;
}
</style>
</head>
<body>
<div>
<p>鼠标悬停显示荷花</p>
<img src="img/荷花.jpg">
</div>
</body>
</html>
将这一应用场景推广一下就是帮助菜单的隐藏和现实。
3152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
