如何使彈出div懸停在jquery中的鏈接上？

Question

如何將彈出窗口懸停在jquery中的鏈接上？

<div id="floatbar"> 
    <a href="" onclick="make it float 10px under this yay"> 
</div> 

Answer 1

jQuery的

$("#floatbar").click(function(e){ 
    e.preventDefault(); 
    $(this).find(".popup").fadeIn("slow"); 
}); 

的CSS

#floatbar { 
    position:relative; 
} 

.popup { 
    position:absolute; 
    top:10px; 
    left:0px; 
    height:30px; 
    background:#ccc; 
    display:none; 
} 

的HTML

<a id="floatbar" href="#"> 
    <div class="popup">Hi there</div> 
    click here 
</a> 

Answer 2

也許它，當你使用類似Fancybox的jQuery或其他替代燈箱更容易？

Answer 3

純CSS解決方案：

<div id="floatbar"> 
    <a href="" onclick="make it float 10px under this yay">Link</a> 
    <div class="box">Popup box</div> 
</div> 

.box { 
    display:none; 
    position: absolute; 
    top: 30px; 
    left: 10px; 
    background: orange; 
    padding: 5px; 
    border: 1px solid black; 
} 

a:hover + .box { 
    display:block; 
} 

您只需在鏈接下面添加一個<div class="box">(popup text)</div>，它就可以用於每個有這種盒子的鏈接。

http://jsfiddle.net/mcdqt/