Javascript 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代码中添加什么，以便只弹出您悬停的图像的描述

我创建了一个JSFIDLE来帮助理解我的问题： 当我将鼠标悬停在图像上方或周围时，描述也会不规则地闪烁，这是为什么

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

使用下一个函数

更新了您的JSFIDLE：

---

仅供参考，$这是指当前选定的元素。

尝试选择与悬停元素相关的描述

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

---

此处不需要.description，但可以防止以后出现错误

感谢您的快速响应。这段代码对我有效，但我有一个小错误。.description类实际上有一个负边距顶部，因此它显示在图像的顶部。当我将鼠标悬停在图像上时，会显示.description类，但如果我的鼠标恰好在图像上方。描述类该类再次消失。参考：感谢您的快速回复。这段代码确实有效，但我有一个小错误。.description类实际上有一个负边距顶部，因此它显示在图像的顶部。当我将鼠标悬停在图像上时，会显示.description类，但如果我的鼠标恰好在图像上方。描述类该类再次消失。参考：

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