Question

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

<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 ... 但是我无法做到这一点......有没有想法解决这个问题的人？

Answer 1

请说出来：

.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。

所以你需要使用上面的第二个。

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

1 个答案: