老师，调试出来了，您帮忙看下是否对，还有为什么用h3不行呢？

效果貌似做出来了，但是有个疑问，为什么用h3:hover不行呢？按理说鼠标移到标题上，然后显示列表也没问题啊？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{
              padding:0px;
              margin:0px;
              font-family:"宋体";
              
          }
          .big{
              text-align:center;
              border:0.5px solid grey;
              width:120px;
          }
         ul{display:none;}
         li{padding:5px 0 5px 0}
         h3{background-color:#ececec;}
         .div1 h3{border-bottom:0.5px solid grey;}
         .div2 h3{border-bottom:0.5px solid grey;}
         .div1:hover .elec,.div2:hover .wash{
             display:block;
             border-bottom:0.5px solid grey;
             
         }
         .div3:hover .clothes{
             display:block;
             border-top:0.5px solid grey;
             
         }
        </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>

L咸鱼君 2019-03-07

源自：盒子模型 4-7 编程练习

收起

4回答

好帮手慕夭夭回答被采纳获得+3积分 2019-03-08 10:00:39

你好同学 ,不知道你是如何加的 . 如果是给h3:hover添加成功的话 , 从功能分析 . 那鼠标只有在h3标签上面悬浮的时候才会显示下拉菜单 , 当鼠标移入到下拉菜单的时候 , 就离开了h3 ,所以下拉菜单就隐藏了 .这是不对的 .

如果你是没有加成功的话 , 可能同学选择器写错了 . 例如很多同学会写成h3:hover .elec ,这样表示h3的子元素 .elec ,但是从结构上看 , .elec和h3是兄弟元素 ,所以不会添加成功 .

如果没有解答你的疑惑 , 可以把自己写错的代码上传一下便于老师更准确高效的帮你解答 .

祝学习愉快 ,望采纳 .

收起回答

L咸鱼君提问者 #1

哦，明白了，谢谢老师

2019-03-08 10:18:42

好帮手慕夭夭 2019-03-08 09:44:19

你好同学 , 根据第二次上传代码测试 , 效果实现了 ,继续加油 , 祝学习愉快 !

收起回答

提问者 L咸鱼君 #1

老师，我还有个问题，鼠标悬停那里，为啥用h3:hover不行呢？

2019-03-08 09:52:20

提问者 L咸鱼君 2019-03-07 21:46:22

我又调整了一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{
              padding:0px;
              margin:0px auto;
              font-family:"宋体";
          }
          .big{
              text-align:center;
              border:0.5px solid grey;
              width:120px;
          }
         li{padding:5px 0 5px 0;display:none;}
         h3{
            background-color:#ececec;
            border:0.5px solid grey;
         }
         .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>

收起回答