将鼠标悬停在图像上时试图显示div

Question

因此，当我将鼠标悬停在图像上时，我试图使包含图像的某些信息的div出现，我的代码似乎不起作用。感谢所有帮助！我将在下面放置与代码相关的代码。

HTML：

< div class="batmobile-info">This is Batman's batmobile, he uses it to chase his enemies or to flee from the police.< /div>
 < img class="batmobile" src="images/batmobile.png" alt="batmobile" >

CSS：

.batmobile{
position:relative;
width:500px;
height:200px;
top:350px;
left:200px;
}

.batmobile-info{
visibility:hidden;
}

.batmobile:hover .batmobile-info{
background-color:white;
text-align:center;
width:290px;
height:40px;
position:absolute;
top:500px;
left:700px;
visibility: visible;
}

Answer 1

嗨，我认为您应该使用js来处理它，例如jQuery，因为您不能仅通过更改以下内容来更改其他元素的样式one'style。

Answer 2

如果您颠倒元素的顺序，则img在div之前，会给您：

<img class="batmobile" src="images/batmobile.png" alt="batmobile">
<div class="batmobile-info">This is Batman's batmobile, he uses it to chase his enemies or to flee from the police.</div>

然后您可以使用以下CSS在悬停时显示div：

.batmobile:hover + .batmobile-info {
  visibility: visible;
}

+是adjacent sibling selector-超级有用的选择器！