4-2编程题为什么样式设置h2鼠标经过事件么有反应
来源：4-2 编程练习
vivi_li
2020-04-18 00:44:51
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选择器章节会有详细的讲解，目前了解下就可以了）。如下：
祝学习愉快~
0 -
好帮手慕码
2020-04-18
同学你好，解答如下：
（1）“元素：hover 这个设置样式的时候只能对子元素设置”这句话是错误的。
（2）写如下：
h2:hover li{display: inline; }这样使用了空格选择器，即后代选择器。
但是h2和li并不是后代关系，所以样式无法生效。而“div h2:hover div>ul>li”的写法同理。
同学可以再理解一下，祝学习愉快~
0h020-04-18 -
好帮手慕码
2020-04-18
同学你好，效果正确。另，因为h2和li不是后代关系，所以使用空格选择器无效：
同学可以再理解一下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-04-18
相似问题