麻烦看一下有哪里不对

来源:4-7 编程练习

英年早秃

2019-08-03 17:06:17

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          div,h3,ul,li{padding:0;margin:0;}
          .big{background-color:#f5f5f5;width:100px;margin:0px auto;border:1px #dcdcdc solid;}
          div{text-align:center;}
          li{display:none;}
          h3{border-bottom:1px solid #dcdcdc;}
          .div1:hover li,.div2:hover li,.div3:hover li{display:block;background-color:#fff;}
        </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>


写回答

1回答

好帮手慕言

2019-08-03

同学你好,效果实现的很好,但是代码可以简化一下。

当big元素下的div在鼠标移入时,li显示出来

http://img.mukewang.com/climg/5d455eaa0001162304580330.jpg

祝学习愉快

0

0 学习 · 40143 问题

查看课程