请问这段代码是哪里错了 无法实现鼠标划过显示内容
来源：4-1 display属性
weixin_慕先生6381652
2018-12-27 23:05:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
ul {width:200px;}
/*补充样式*/
span,li{display:none;}
a:hover li span{display:inline-block;}
</style>
</head>
<body>
<ul>
<h2><a href="#">家电</a></h2>
<li><span>冰箱</span></li>
<li><span>空调</span></li>
<li><span>洗衣机</span></li>
</ul>
</body>
</html>
1回答
-
山河远阔ZZ
2018-12-28
同学你好，代码中有两处错误：
1、直接给li标签添加display：none;即可，如下图：
以为span是li标签的子元素，当li标签隐藏了之后，span也会跟着隐藏，参考下图：
2、应该属鼠标移动到li的父元素上面之后，让li显示，如下图：
当鼠标移动到ul上之后，让li标签显示，参考下图：
希望解决了你的疑问，祝学习愉快，望采纳！
0
相似问题