javascript - 图像鼠标悬停时覆盖面板

Question

我正在使用 Twitter Bootstrap，我想在鼠标悬停在 img 标签上时实现一个覆盖面板，就像在 Stackoverflow 中，当焦点位于用户图像时显示详细信息。

这张图片说明:

有人问我怎么做到的？ 谢谢。

Answer 1

无论你想要什么作为“悬停”对象，只要给 position: absolute，然后有一个 :hover 选择器，例如:

HTML

<div>
   <div class="Profile">
       Basic Profile
       <div class="Overlay">
           Put overlay stuff here.
       </div>
   </div>
</div>

CSS

.Profile{
    position: relative;
}
.Overlay{
    position: absolute;
    top: 100%;
    left: 0px;
    opacity: 0;
    height: 0;
}

.Profile:hover .Overlay{
    height: auto;
    opacity: 1;
}

现在，当用户将鼠标悬停在 .Profile div 上时，其中包含的 .Overlay 将出现，然后添加任何额外的过渡样式并使其美观.

Example JSFiddle