html - 如何在图像悬停时显示div？

我有一些这样的代码...

<div class="col-lg-8 col-xs-12 col-sm-7 col-md-8 "  style="vertical-align:top;">
  <img src="images/url.jpg" class="banner_img" />
  <div class="banner_caption">
    <h3>Banner caption here</h3>
  </div>
</div>

和这样的CSS ...

.banner_caption{
    background-color:rgba(0,0,0,0.3);
    width:100%;
    padding:5px;
    position:absolute;
    bottom:-60px;
    display:none;
    left:0;
    color:#fff;
    transition-delay:1s;
    transition:all 1s;
}

.banner_img:hover .banner_caption{
    bottom:0px;
    display:block;
}

当我将鼠标悬停在图片上时，banner_caption div应该会出现...
但我无法做到这一点。。。。

最佳答案

只要给这个：

.banner_img:hover + .banner_caption

加号（+）称为同级选择器。

.banner_img:hover + .banner_caption{
    bottom: 0;
    display: block;
}

您的网站不起作用的原因是：


.banner_img:hover .banner_caption：.banner_caption在.banner_img内部。
.banner_img:hover + .banner_caption：.banner_caption与.banner_img相邻。


因此，您需要使用上面的第二个。

关于html - 如何在图像悬停时显示div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32871600/