Javascript 图像鼠标悬停时的覆盖面板

我使用的是Twitter引导，我想在鼠标悬停在img标记上时实现一个覆盖面板，就像在Stackoverflow中，当焦点在用户的图像上时显示细节一样

此图说明：

谁知道我是怎么做到的？ 谢谢。

无论您想要什么样的“悬停”对象，只需给出

位置：绝对

，然后使用

：悬停

选择器，例如：

HTML

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

因此，现在，当用户将鼠标悬停在

.Profile

div上时，其中包含的

.Overlay

将出现，然后为过渡添加任何附加样式并使其美观

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

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