4-2编程题为什么样式设置h2鼠标经过事件么有反应

4-2编程题为什么样式设置h2鼠标经过事件么有反应

1/请老师先看下我的代码正确与否

2/请老师解答下疑惑,为何给h2设置鼠标经过事件没有反应

<style type="text/css">
       div {
           width: 200px;
       }
       /*补充样式*/
       li {
           display: none;
       }
      div:hover li{
          display: inline;
       }


   </style>
</head>

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

正在回答

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

3回答

同学你好,由于h2和(li的父级)ul是兄弟元素,需要使用兄弟选择器“+”才可以(后面的css3选择器章节会有详细的讲解,目前了解下就可以了)。如下:

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

祝学习愉快~

好帮手慕码 2020-04-18 12:07:43

同学你好,解答如下:

(1)“元素:hover 这个设置样式的时候只能对子元素设置”这句话是错误的。

(2)写如下:

 h2:hover li{display: inline; }

 这样使用了空格选择器,即后代选择器。

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

但是h2和li并不是后代关系,所以样式无法生效。而“div h2:hover div>ul>li”的写法同理。

同学可以再理解一下,祝学习愉快~

  • 提问者 vivi_li #1
    那么对h2设置hover样式,怎么追还代码才可以设置li的样式?
    2020-04-18 12:09:47
好帮手慕码 2020-04-18 11:02:39

同学你好,效果正确。另,因为h2和li不是后代关系,所以使用空格选择器无效:

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

同学可以再理解一下。

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

  • 提问者 vivi_li #1
    /*可是这样好像还不对啊,能再说的明白么 难道是 元素:hover 这个设置样式的时候只能对子元素设置?*/ li { display: none; } /*div:hover li{*/ /* display: inline;*/ /* }*/ div h2:hover div>ul>li{ display: inline; }
    2020-04-18 11:18:21
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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