为何无法实现鼠标滑过标题，出现相应内容？

来源：4-7 编程练习

qq_鸭绿桥第一帅哥_0

2018-11-03 15:30:47

li{background-color: white;display: none;} h3:hover li{display: block;}为什么无法实现效果？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          body,div,h3,ul,li{margin: 0px;padding: 0px;}
          .big{margin: 0 auto;width: 150px;background-color: #f2f4f6;border: 1px solid #ececec;text-align: center;}
          h3{font-size: 20px;font-family: "宋体";}
          li{font-size: 12px;font-family: "宋体";}
          .div1,.div2,.div3{border: 1px solid #d9dde1;}
          li{background-color: white;display: none;}
          h3:hover li{display: inline;}
          
        </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>

写回答

2回答