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

<!DOCTYPE html>

<html>

<head>

<title>display属性</title>

/*样式补充*/

*{padding:0px;margin:0px;}

.big{width:120px;margin:0 auto;background-color:#F5F5F5; }

ul{background-color:white;display:none;text-align:center;}

h3{border:1px solid #DCDCDC;text-align:center;}

h3:hover ul{display:block;}

</style>

</head>

<body>

</ul>

</div>

</ul>

</div>

</ul>

</div>

</body>

</html>

源自：盒子模型 4-7 编程练习

收起

2回答

好帮手慕星星 2020-05-05 10:07:00

同学你好，问题解答如下：

1、~是兄弟选择器，element1~element2 选择器 element1 之后出现的所有 element2。代码中h3余ul是兄弟元素，所以使用可以显示效果。

2、‘好帮手慕闫’老师的改法有没有测试呢？并不是移入后全部的li显示出来，移入一个显示一个。

.big div:hover ul {
            display: block;
        }

3、合并的写法错了，应该是这样

每个单独实现的选择器需要全部写上。

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

好帮手慕言 2020-05-01 17:58:45

同学你好，h3:hover ul这种写法是后代选择器，表示鼠标悬停在h3元素时，让它的后代元素ul显示出来。在同学的html结构中，h3和ul并不是父子级关系，因此是不生效的。

建议：可以把hover状态添加在div元素上，如下：

另外：li元素有默认的小黑圆点，影响美观。建议:给li设置list-style: none;样式。代码参考：

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

提问者慕用6222994 #1

老师，h3:hover~ul{display:block;}添加~又会显示，这是为什么呢？

2020-05-01 19:55:27
提问者慕用6222994 #2

按照老师的方法修改，它是直接一次性的吧所有li显示出来，而不是针对鼠标在h3标题显示

2020-05-01 19:59:05
提问者慕用6222994 #3

老师，我合并格式.div1,.div2,.div3:hover ul{display:block;}为什么实现不了？分开写却可以实现效果？ .div1:hover ul{display:block;} .div2:hover ul{display:block;} .div3:hover ul{display:block;}

2020-05-01 20:08:22