4-3代码问题？
来源：4-6 案例应用
OlafChou
2017-05-17 09:06:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
ul {width:200px;}
li{list-style-type: none;display: none;}
a{text-decoration: none; color: #000;}
a:hover li{display: inline;}
</style>
</head>
<body>
<ul >
<h2><a href="">家电</a></h2>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</ul>
</body>
</html>
为啥点击家电不显示呢？
写回答
1回答
-
你好，a:hover li{display: inline;} （这是一个后代选择器）的意思是 鼠标经过 a 标签时， 它下（及里面）的 li 显示出来，分析 html 代码：
<ul > <h2><a href="">家电</a></h2> <li>冰箱</li> <li>空调</li> <li>洗衣机</li> </ul>
在 a 标签里面没有 li ，所以不起作用，请根据练习要求中的 html 代码来写 css 样式。
希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳呦。
0
相似问题