JQuery懸停提示

Question

我想修改以下腳本來顯示/隱藏提示只有當「？」懸停上，而不是整個 「禮」 阻止

的HTML：

<ul class="tips"> 
<li> 
    <a href="#" class="tooltip">?</a> Feature 1 
    <div class="tip"> 
    <h4>Tip Title 1</h4> 
    <h4>Tip Q</h4> 
    <p>Tip A</p> 
    </div> 
</li> 
<li> 
    <a href="#" class="tooltip">?</a> Feature 2 
    <div class="tip"> 
    <h4>Tip Title 2</h4> 
    <h4>Tip Q</h4> 
    <p>Tip A</p> 
    </div> 
</li> 
<li> 
    <a href="#" class="tooltip">?</a> Feature 3 
    <div class="tip"> 
    <h4>Tip Title 3</h4> 
    <h4>Tip Q</h4> 
    <p>Tip A</p> 
    </div> 
</li> 
</ul> 

jQuery的腳本

$("ul.tips li").hover(function() { 
    $(this).find("div").stop() 
    .fadeIn() 
    .css("display","block") 

}, function() { 
    $(this).find("div").stop() 
    .fadeOut() 
}); 

的CSS：

.tips div { 
display: none; 
position: absolute; 
bottom: 0; 
width: 100%; 
height;auto; 
background: #e00; 
left:0; 
}​​​​​​​​​ 

我試圖修改這樣的腳本

$("ul.tips li a").hover(function() { 

所以它的目標是「a」標籤，但它最終沒有顯示任何東西。

Answer 1

您需要結束您的js的線條：

$("ul.tips li a").hover(function() { 
    $(this).siblings("div.tip").stop() 
    .fadeIn() 
    .css("display","block"); // <-- gotta put the semi-colon 

}, function() { 
    $(this).siblings("div.tip").stop() 
    .fadeOut(); //<-- here too 
}); 

Answer 2

這似乎是不尋常，因爲它看起來像它應該工作，但嘗試：

$(".tooltip").hover(function() { ... }); 

你也應該改變$(this).find("div")...到$(this).next()...

Answer 3

你需要確保你換你的事件處理程序中的jQuery的文件準備好功能：

$(document).ready(function() { 
$("ul.tips li").hover(function() { 
    $(this).find("div").stop() 
    .fadeIn() 
    .css("display","block") 

}, function() { 
    $(this).find("div").stop() 
    .fadeOut() 
}); 
}); 

除非已將html元素加載到DOM樹中，否則懸停事件不會綁定到html元素。 $(document).ready()延遲運行包含在傳遞的匿名函數中的JS，直到加載了HTML文檔的其餘部分並且DOM樹已準備就緒。

更多閱讀的：http://docs.jquery.com/Tutorials:Introducing_$(document).ready()