老师，调试出来了，您帮忙看下是否对，还有为什么用h3不行呢？
来源：4-7 编程练习
L咸鱼君
2019-03-07 21:25:06
效果貌似做出来了，但是有个疑问，为什么用h3:hover不行呢？按理说鼠标移到标题上，然后显示列表也没问题啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
*{
padding:0px;
margin:0px;
font-family:"宋体";
}
.big{
text-align:center;
border:0.5px solid grey;
width:120px;
}
ul{display:none;}
li{padding:5px 0 5px 0}
h3{background-color:#ececec;}
.div1 h3{border-bottom:0.5px solid grey;}
.div2 h3{border-bottom:0.5px solid grey;}
.div1:hover .elec,.div2:hover .wash{
display:block;
border-bottom:0.5px solid grey;
}
.div3:hover .clothes{
display:block;
border-top:0.5px solid grey;
}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>写回答
4回答
-
你好同学 ,不知道你是如何加的 . 如果是给h3:hover添加成功的话 , 从功能分析 . 那鼠标只有在h3标签上面悬浮的时候才会显示下拉菜单 , 当鼠标移入到下拉菜单的时候 , 就离开了h3 ,所以下拉菜单就隐藏了 .这是不对的 .
如果你是没有加成功的话 , 可能同学选择器写错了 . 例如很多同学会写成h3:hover .elec ,这样表示h3的子元素 .elec ,但是从结构上看 , .elec和h3是兄弟元素 ,所以不会添加成功 .
如果没有解答你的疑惑 , 可以把自己写错的代码上传一下 便于老师更准确高效的帮你解答 .
祝学习愉快 ,望采纳 .
0h019-03-08 -
好帮手慕夭夭
2019-03-08
你好同学 , 根据第二次上传代码测试 , 效果实现了 ,继续加油 , 祝学习愉快 !
0h019-03-08 -
L咸鱼君
提问者
2019-03-07
我又调整了一下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> /*样式补充*/ *{ padding:0px; margin:0px auto; font-family:"宋体"; } .big{ text-align:center; border:0.5px solid grey; width:120px; } li{padding:5px 0 5px 0;display:none;} h3{ background-color:#ececec; border:0.5px solid grey; } .div1:hover li,.div2:hover li,.div3:hover li{ display:block; } </style> </head> <body> <div class="big"> <div class="div1"> <h3>家电</h3> <ul class="elec"> <li>冰箱</li> <li>洗衣机</li> <li>空调</li> </ul> </div> <div class="div2"> <h3>洗护</h3> <ul class="wash"> <li>洗衣液</li> <li>消毒液</li> <li>柔顺剂</li> </ul> </div> <div class="div3"> <h3>衣物</h3> <ul class="clothes"> <li>衬衫</li> <li>裤子</li> <li>卫衣</li> </ul> </div> </div> </body> </html>0 -
L咸鱼君
提问者
2019-03-07
忘了在.big中加margin:0 auto;了
0
相似问题