4.3编程哪里出问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{display:none;}
    a:hover div{display:inline;}


</style></head><body>
<h1><a href="#">家电</a><div>冰箱空调洗衣机</div></h1>
</body>
</html>

k1ans 2017-07-30

源自：盒子模型 4-1 display属性

收起

2回答

好帮手慕糖 2017-07-31 09:45:12

你好，可把hover事件，修改为h1:hover div{display:inline;} 祝学习愉快！

收起回答

qq_天天_66 2017-07-30 23:50:21

a和div是兄弟元素的关系，但是你的样式里面的设置是指a 是 div 的祖先元素

收起回答

提问者 k1ans #1

请问有啥解决方法嘛

2017-07-31 08:42:53
斌冰4421289 回复提问者 k1ans #2

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> ul {width: 200px; list-style:none;} /*补充样式*/ li{ display:none; } ul:hover li{ display:inline-block; } </style> </head> <body> <ul> <h2>家电</h2> <li>冰箱</li> <li>空调</li> <li>洗衣机</li> </ul> </body> </html>

2017-07-31 10:30:40
斌冰4421289 回复提问者 k1ans #3

就是hover显示的内容必须为添加hover伪类的元素的子元素，其实ul:hover li{ display:inline-block; }这样写是后代选择器的写法，hover是ul的一个属性和class属性一样就像我们有时候给ul加了一个class=ul1；的时候，我们给ul内的li添加样式的时候，我们可以写作ul.ul1 li{写我们要添加的样式，例如width：200px；}。

2017-07-31 10:36:37