无法实现效果，不知道哪里错了呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
ul {width:200px;}
/*补充样式*/
li{display:none;}
a{text-decoration:none;color:black;}
a:hover li{display:inline;}
</style>
</head>
<body>
<ul>
<a href="#"><h2>家电</h2></a>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</ul>
</body>
</html>
鼠标放在上面时无法实现效果。。。
正在回答
a标签和li是同级的关系，不能使用后代选择器，要使用选择器~，选取后面的所有兄弟元素才行。
ul:hover li{display:inline;}样式表中的a:hover li{display:inline;}改成上面的代码就可以实现了。
a:hover li{display:inline;}的意思是，当鼠标划过a时，a标签里的li标签显示出来，很明显li标签不是a标签的子元素，所以显示不出来。
ul:hover li{display:inline;}它的意思是，当鼠标划过ul标签时，ul里的li标签显示出来，按照html标签的结构来看，li是在ul里面的，a也在ul里面，且a与ul是同一级别，所以无法使用a:hover li，
如果想使用鼠标放在a上显示li，可以参考上面助教老师给的代码a:hover~li，~选择器的意思选择其兄弟元素，所以能定位到a下面的兄弟元素li。
希望你能理解~
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星