<分区>
<分区>
当我将鼠标悬停在图像上时，我试图制作一个包含有关图像的一些信息的 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;
}
最佳答案
如果你颠倒了元素的顺序，那么 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 - 一个 super 有用的选择器!
关于html - 将鼠标悬停在图像上时试图使 div 出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58190775/