4-5麻烦帮看看

来源：4-8 课程总结

不是姑娘

2017-12-28 20:53:08

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
 /*样式补充*/
 body,h3,div,ul{margin:0;padding:0;font-family:"微软雅黑";}
        .big{border:1px solid red;width:150px;margin:10px auto 0;}
        .div1,.div2{border-bottom:1px solid ghostwhite; }
        h3{background-color:deepskyblue;}
        h3,ul{text-align: center;}
        .elec li,.wash li,.clothes li{display:none;}
        .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>

还有我想问下，要li展开，用ul:hover li{}不行的原因是不是h3是ul的同级元素，还是因为ul元素是不显示的？

写回答

1回答