麻烦老师帮我检查，谢谢！

首页课程实战体系课手记专栏慕课教程

麻烦老师帮我检查，谢谢！

来源：4-7 编程练习

慕神9465694

2019-07-24 17:04:36

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>display属性</title>

<style type="text/css">

/*样式补充*/

*{padding:0;margin:0;font-family: "微软雅黑";}

li{display:none;}

ul{list-style: none}

.big{width:150px;

margin:0 auto;

background-color:lightgray;

text-align:center;

border:1px solid gray;

}

.div1:hover li{display:block;

background-color:white;}

.div1:hover ul{border:1px solid lightgray;}

.div2:hover li{display:block;

background-color:white;}

.div2:hover ul{border:1px solid lightgray;}

.div3:hover li{display:block;

background-color:white;}

.div3:hover ul{border:1px solid lightgray;}

.div1,.div2,.div3{line-height:2em}

.div1 h3,.div2 h3{border-bottom:1px solid gray;}

.special{border-bottom:1px solid gray;}

</style>

</head>

<body>

<div class="big">

<div class="div1">

<h3>家电</h3>

<ul class="elec">

<li>冰箱</li>

<li>洗衣机</li>

<li class="special">空调</li>

</ul>

</div>

<div class="div2">

<h3>洗护</h3>

<ul class="wash">

<li>洗衣液</li>

<li>消毒液</li>

<li class="special">柔顺剂</li>

</ul>

</div>

<div class="div3">

<h3>衣物</h3>

<ul class="clothes">

<li>衬衫</li>

<li>裤子</li>

<li>卫衣</li>

</ul>

</div>

</div>

</body>

</html>

写回答

1回答

好帮手慕言

好帮手慕言

2019-07-24

已采纳

同学你好，效果是可以实现的，

但是代码可以优化一下哦，给ul元素设置隐藏，当big元素下面的div元素在鼠标移入时，ul显示出来。

代码参考：

祝学习愉快~

0

0 学习 · 40143 问题

相似问题

老师帮我看一下，谢谢！

回答 2

请老师检查谢谢

回答 1

麻烦老师检查

回答 2

麻烦老师看看有什么问题，谢谢！

回答 2

4-7 烦请老师检查，谢谢

回答 1

打开慕课网App查看更多内容