Question

html css中的hover无效，求助！！！

<div class="head_ad">
<a href="">
<img src="./img/1.jpg" alt="">
</a>
</div>
<div class="ad_in">
<img src="./img/2.jpg" alt="">
</div>

css中：#ad_in先设置为display为none；想设置鼠标放在head_ad上显示ad_in的效果，但是.head_ad:hover ad_in{dispaly:block;}并没有任何效果，求助

Answer 1

.head_ad:hover ad_in{dispaly:block;}
改为
.head_ad:hover .ad_in{dispaly:block;}
少了一个点

追问

我打字打漏了，我写了.的还是没效

追答

我仔细一看才发现你这head_ad和ad_in并不是父子关系而是兄弟关系，你这是挖了一个大坑啊。
解决办法一：把兄弟变成父子：

css则是 .head_ad:hover .ad_in{dispaly:block;}
解决办法二：仍按兄弟处理：

css则是 .head_ad:hover+.ad_in{dispaly:block;}
建议用办法一，兼容性比较好