为什么这样用 h3:hover~li{display:block;}打不开而其他可以？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hh</title>
<style type="text/css">
/*样式补充*/
*{
padding:0;
margin:0 auto;
list-style:none;
font-family:"宋体";
}
.big{
width:150px;
border:1px solid #bebebe;
}
h3{
background-color:#f2f2f2;
font-size:29px;
border-bottom:1px #bebebe solid;
padding:5px;
text-align:center
}
li{
display:none;
text-align:center;
font-size:29px;
border:1px #bebebe solid;
padding:5px;
}
.div1:hover li{display:block;}
h3:hover~li{display:block;}
.div3:hover li{display:block;}
.ch3{
border-bottom:none;
}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3 class="ch3">衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
/*根据上一条提问的解答：，因为ul的高度是由子元素li撑开的，但是li是隐藏的，所以ul是没有高度的，如下，高度为0哦。没有高度的话，是无法移入的。所以建议：设置给div；
我试着改了下： h3:hover~li{display:block;}打不开而其他可以？
*/
正在回答
你好，
之前老师说过了哦，~是选择当前元素后面所有指定的兄弟元素，仅限于兄弟元素。h2标签在ul中，与li是兄弟元素，所以可以实现效果，自己再测试下。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星