jQuery包含名称的浮动框

Question

有人能指出我正确的方向来制作教程或类似的代码，创造出与Facebook截图相同的效果：

当我将鼠标悬停在图片上时，会显示其用户名。

我喜欢使用jQuery。

Answer 1

使用jQuery实现此效果的最近的库将是tipsy

Answer 2

http://jsfiddle.net/T3xCK/

CSS：

.profile{position:relative; width:100px; height:100px; background:#FF0000; float:left; margin:10px;}

.profile .username{position:absolute; top:-30px; left:0; background: rgba(0,0,0,0.7); display:none; width:100px; height:30px;}

<强> JS：

$('.profile').hover(function(){
    $(this).children('.username').fadeIn();
}, function(){
    $(this).children('.username').fadeOut();
});

<强> HTML

<div class="profile">
    <div class="username"></div>
</div>
<div class="profile">
    <div class="username"></div>
</div>
<div class="profile">
    <div class="username"></div>
</div>

CSS不难改变为你自己的。

您也可以查看hoverIntent和其他排队方法。这是一个非常简单的模型，应该针对实时环境进行改进