显示隐藏元素,只能作用于父元素和子元素之间的关系吗,平级关系不行吗,就是这个ul和h2

显示隐藏元素,只能作用于父元素和子元素之间的关系吗,平级关系不行吗,就是这个ul和h2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
    div {
        width: 200px;
    }
    /*补充样式*/
    li{
        display:none;
    }
    div:hover li{
        display:inline-block;
    }
    </style>
</head>

<body>
    <div>
        <h2>家电</h2>
        <ul>
            <li>冰箱</li>
            <li>空调</li>
            <li>洗衣机</li>
        </ul>
    </div>
</body>

</html>


正在回答 回答被采纳积分+1

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

3回答
好帮手慕夭夭 2020-02-22 09:58:14

同学你好,老师在第一张截图中,给同学加了注释,请看一下。h2:hover~ul选中的是h2后面的兄弟元素 ul,而h2:hover ul 意思是h2的子元素ul ,ul并不是h2的子元素,所以不对。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕夭夭 2020-02-19 14:59:24

同学你好,代码实现正确。如果把hover样式绑定在h2上,那么鼠标移入下拉菜单之后,由于离开了h2 ,hover样式就不起作用,即下拉菜单就会隐藏,所以还是放在父元素上更好。

同学可以试一试

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

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕勒2497449 #1
    h2:hover~li 中的~是为什么要放置呢?它的作用是什么呢? 为什么没有"~"个元素,就实现不了效果呢?
    2020-02-21 19:09:23
struggle2015 2020-02-19 14:54:14

我觉得可以,我就是这样实现的

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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