体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么这样用 h3:hover~li{display:block;}打不开而其他可以？

来源：4-7 编程练习

weixin_慕后端7118097

2019-09-06 12:03:53

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>hh</title>

        <style type="text/css">

          /*样式补充*/

        *{

            padding:0;

            margin:0 auto;

            list-style:none;

            font-family:"宋体";

        }

        .big{

            width:150px;

            border:1px solid #bebebe;

        }

        h3{

            background-color:#f2f2f2;

            font-size:29px;

            border-bottom:1px #bebebe solid;

            padding:5px;

            text-align:center

        }

        li{

            display:none;

            text-align:center;

            font-size:29px;

            border:1px #bebebe solid;

            padding:5px;

        }

        .div1:hover li{display:block;}


        h3:hover~li{display:block;}


        .div3:hover li{display:block;}

        .ch3{

            border-bottom:none;

        }

        </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 class="ch3">衣物</h3>

             <ul class="clothes">

                <li>衬衫</li>

                <li>裤子</li>

                <li>卫衣</li>

            </ul>

        </div>

      </div> 

</body>

</html>

/*根据上一条提问的解答：，因为ul的高度是由子元素li撑开的，但是li是隐藏的，所以ul是没有高度的，如下，高度为0哦。没有高度的话，是无法移入的。所以建议：设置给div；

我试着改了下： h3:hover~li{display:block;}打不开而其他可以？

*/

写回答

2回答

好帮手慕星星

2019-09-06

已采纳

你好，

之前老师说过了哦，~是选择当前元素后面所有指定的兄弟元素，仅限于兄弟元素。h2标签在ul中，与li是兄弟元素，所以可以实现效果，自己再测试下。

0
heixin_慕后端7118097
h 懂了，谢谢
h019-09-06
共1条回复

好帮手慕星星

2019-09-06

同学你好，

~是选择当前元素后面所有指定的兄弟元素，仅限于兄弟元素哦，而h3与ul才是兄弟元素，li是ul的子元素，所以实现不了效果。

如果想要用~选择器的话，可以设置ul隐藏，如下：

http://img.mukewang.com/climg/5d720e2e0001436403960556.jpg

自己可以测试下，祝学习愉快！

0
heixin_慕后端7118097
h <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> ul {width:200px; } ul li{ list-style:none; display:none; } h2:hover~li{ display:inline-block; } </style> </head> <body> <ul> <h2>家电</h2> <li>冰箱</li> <li>空调</li> <li>洗衣机</li> </ul> </body> </html> 那请问为什么这样可以
h019-09-06
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

老师，为什么hover失效了呢？

回答 2

这样为什么不可以？

回答 2

4-7编程题为何不生效

回答 3

请老师检查，不知道为什么没有效果！

回答 2

为什么hover前面用div可以生效，用h2就不可以？

回答 2

打开慕课网App查看更多内容