包含名称的 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 和其他排队方法。这是一个非常简单的模型，应该针对现场环境进行改进