jQuery：他の要素と名前を共有する要素にエフェクトを適用する方法

Question

画像の上に説明欄が表示されたときに、その上にポップアップするコードを書き込もうとしています。私は非常によくjQueryのまたはJavaScriptに精通していないですが、あなたは画像の上にカーソルを置く史上とき、私は説明が表示され、このコードが出ている

<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> 

：私はこのようなルックスの並べ替え私のページに複数の画像を持っています：

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

このコードの問題は、すべての画像を上書きするとすべての説明がポップアップすることです。私のjQueryコードに追加する必要があるので、あなたの上に置かれている画像の説明だけがポップアップするようにする必要がありますか？

私は私の問題を理解するためjsfiddleを作成しました：http://jsfiddle.net/qnWpy/ （私は上や画像の周りに置くとも説明が不規則に点滅し、理由です？）

Answer 1

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

は、次の（）関数を使用します。 http://api.jquery.com/next/

更新ごjsfiddle：FYI http://jsfiddle.net/qnWpy/1/

は、$（これは）現在選択されている要素を指します。

Answer 2

ホバリングされた要素に関連する説明を選択してみてください。

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

「.DESCRIPTIONは」ここでは必須ではありませんが、後で