包含名稱

Question

jQuery的浮箱

可能有人點我的教程或類似的代碼創建在這個截圖來自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和其他排隊方法。這是一個非常簡單的模型，應該改進爲一個現場環境