请老师检查,不知道为什么没有效果!

请老师检查,不知道为什么没有效果!

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          *{padding:0px;margin:0px;}

         li{list-style:none;}

         .big{width:100px;background-color:#eaeaea;border:1px #bebebe solid;margin:0px auto;font-family:"微软雅黑";}

        

          h3{text-align:center;border:1px #bebebe solid;}

          li{text-align:center;background-color:white;font-size:14px;line-height:2em;display:none;}

          h3: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>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,是选择器的问题,同学这样写h3:hover li代表的是当鼠标移上h3标题时,其下的子元素li标签显示出来,而li标签并不是h3的子元素,所以是选择不到的。修改参考:

http://img1.sycdn.imooc.com//climg/5eb7c17309f3e3fe06360161.jpg

祝学习愉快~

  • 一穷二白入前端 提问者 #1
    我看到别的小伙伴写成 h3:hover~ul 就可以显示了。为什么啊~这个符号代表什么意思呢
    2020-05-10 17:00:50
好帮手慕粉 2020-05-10 18:29:00

同学你好,关于同学的问题回答如下:

1、h3:hover~ul 中,~是兄弟选择器,代表的是当鼠标移上h3标题时,它的兄弟元素就显示出来。

2、但是这个样式在同学的代码里面还是不生效的,因为同学是给li标签设置的display:none,而不是给ul,如果要给ul设置的话,参考以下:

http://img1.sycdn.imooc.com//climg/5eb7d71e09023fad05820423.jpg

就是当鼠标移上h3时,让其兄弟元素ul显示出来。

代码的实现方式有很多种,没有标准答案的,只要能正确实现效果即可。

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师