jQuery：如何將效果應用於與其他元素共享名稱的元素

我想寫一些代碼，當我將鼠標懸停在圖像上時，說明框會彈出圖像。我有我的網頁上的多個圖像看起來有點像這樣：jQuery：如何將效果應用於與其他元素共享名稱的元素

<div class="image"> 
    <a href="?page=page1>"><img src="images/1.jpg" width="220" height="220"></a> 
</div> 
<div class="description" style="display: none;"> description 1 </div> 

<div class="image"> 
    <a href="?page=page2>"><img src="images/2.jpg" width="220" height="220"></a> 
</div> 
<div class="description" style="display: none;"> description 2 </div> 

<div class="image"> 
    <a href="?page=page3"><img src="images/3.jpg" width="220" height="220"></a> 
</div> 
<div class="description" style="display: none;"> description 3 </div>

我不是很精通的jQuery或Javascript，但我想出了這個代碼時，你永遠將鼠標懸停在圖片顯示的說明：

$(".image").hover(function() { 
    $(".description").fadeToggle(); 
});

這段代碼的問題是，當你在過任何圖像，所有的描述中彈出。我必須添加什麼我的jQuery代碼，以便只有你懸停的圖像的描述彈出？

我創建了一個的jsfiddle幫助理解我的問題：http://jsfiddle.net/qnWpy/ （也說明閃爍不正常，當我懸停或在圖像周圍，爲什麼？）

來源

2012-01-12 Xecure

$(".image").hover(function() { 
    $(this).next(".description").fadeToggle(); 
});

使用next（）函數; http://api.jquery.com/next/

更新您的jsfiddle：http://jsfiddle.net/qnWpy/1/

僅供參考，$（這）是指當前選定的元素。

來源

2012-01-12 20:46:43

謝謝你的快速反應。此代碼適用於我，但我有一個小錯誤。 .description類實際上具有負邊距，所以它顯示在圖像的頂部。當我將鼠標懸停在圖像上時，.description類顯示出來，但是如果我的鼠標碰巧超過了。描述類再次消失。參考：http://jsfiddle.net/zakiaziz/qnWpy/2/ – Xecure 2012-01-12 21:32:20

嘗試選擇相對於懸停元素的描述。

$(".image").hover(function() { 
    $(this).next(".description").fadeToggle(); 
});

的「.DESCRIPTION」這裏不需要，但可以防止蟲子後

來源

2012-01-12 20:47:23

感謝您的快速回復。這段代碼確實有用，但我有一個小錯誤。 .description類實際上具有負邊距，所以它顯示在圖像的頂部。當我將鼠標懸停在圖像上時，.description類顯示出來，但是如果我的鼠標碰巧超過了。描述類再次消失。參考：http://jsfiddle.net/zakiaziz/qnWpy/2 – Xecure 2012-01-12 21:33:24

jQuery：如何將效果應用於與其他元素共享名稱的元素

回答

相關問題