老师麻烦看看有什么问题
来源：4-7 编程练习
慕九州5543252
2020-02-01 10:33:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
div{border:1px solid;background-color:#bebebe;width:150px;text-align:center;margin:0; padding:0;}
li{background-color:white;}
.elec{display:none}
.wash{display:none;}
.clothes{display:none;}
.div1:hover .elec{display:inline;}
.div2:hover .wash{display:inline;}
.div3:hover .clothes{display:inline;}
a{text-decoration:none;color:black;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3><a href="#">家电</a></h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3><a href="#">洗护</a></h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3><a href="#">衣物</a></h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕粉
2020-02-01
同学你好，大致效果是没有问题的，还有一些细节的地方需要注意，当鼠标移入时，div的背景色高度发生变化：
这是因为同学没有清除掉元素自带的内外间距，将盒子撑大了，修改参考：
如果我的回答帮助了你，欢迎采纳，祝学习愉快！
0
相似问题
回答 2
回答 3
回答 1
回答 1
回答 1