4.3问题

4.3问题

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

            ul {width:200px;}

            /*ul li{display:inline-block; }*/

            ul li{display:none;}

            h2:hover ul>li{display:inline-block;}

        </style>

    </head>

    <body>

        <ul>

            <h2>家电</h2>

            <li>冰箱</li>

            <li>空调</li>

            <li>洗衣机</li>

        </ul>

    </body>

</html>


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

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

4回答
小丸子爱吃菜 2017-08-16 11:09:41

h2:hover li,这个选择器的意思是,当鼠标悬停在h2标签上时,h2的后代元素li显示出来。

li是h2的后代元素么???



小丸子爱吃菜 2017-08-10 09:38:21

h2:hover ul>li,这个选择器的意思是,当鼠标悬停在h2标签上时,h2的后代元素ul中的里显示~

选择器跟html元素结构不符合!

  • 为什么h2:hover li {display:inline;}不行?
    2017-08-15 22:43:33
qq_天天_66 2017-08-07 14:17:43

关键是你的样式的中表达的意思是h2是ul的祖先元素,这个肯定不起作用,因为他找不到满足要求的结构

要理解样式所代表的关系哦,尤其是你使用关联样式设置时,要弄清除各个标签之间的关系

当然你也可以改成下面的兄弟元素关系来显示,但是我不建议使用,它有一定的局限性

h2:hover~li{display:inline-block}

qq_天天_66 2017-08-04 21:23:21

h2:hover ul>li{display:inline-block;}改成ul:hover li{display:inline-block}

  • 提问者 坏女孩5 #1
    谢谢,确实达到了效果。可是家电明明是在h2标签内的,为什么要写成ul:hover呢?
    2017-08-07 10:45:28
  • 学霸爱睡觉 回复 提问者 坏女孩5 #2
    同样的疑问?难道h标签不能用:hover??
    2017-08-09 22:12:14
  • 同样的疑问,为啥?
    2017-08-15 22:42:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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