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

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 相邻。

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