4-5编程练习

这个怎么写啊那种指针划过的内容

未来总是美好的 2017-12-19

源自：盒子模型 4-8 课程总结

收起

1回答

lanrtop 回答被采纳获得+3积分 2017-12-19 23:42:18

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          body{margin:0;padding:0;}
          .big{width:100px;border:1px solid gray;}
          h3{background:gray;margin:0;}
          ul{list-style-type:none;margin:0;display:none;}
          ul,h3{padding:2px 30px;}
          li{padding:2px;}
          .div1:hover ul，.div2:hover ul，.div3:hover ul{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>

希望能帮到你。

请点【采纳答案】

如果还有问题，我会全力为你解答。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

收起回答

小于飞飞 #1

简化代码将相同的提出出来，统一定义样式，如.div1:hover ul， .div2:hover ul， .div3:hover ul{display:block;}

2017-12-20 10:07:27
lanrtop 回复小于飞飞 #2

谢谢~~~~！！！

2017-12-20 10:19:57