当鼠标悬停在其他特定元素上时，jQuery 显示不同的元素(div)

Question

fiddle >> http://jsfiddle.net/8bwSD/1/

我正在使用 HTML5、CSS3 和 jQuery 制作一个网站。

我有一个图片库。所有图像中都有一个信息框(带有一些样式的简单 div)。

将鼠标悬停在信息框上时，会显示相关信息。

下面是显示/隐藏(滑入/滑出)相关信息的 jQuery:

$(".info").hover(function(){
  $(".cap2").slideDown(400);
}, function(){
   $(".cap2").slideUp(300);
});

图像信息位于 HTML 内。

“信息”框(将悬停在其上)也在 HTML 内。

目前，图像信息和信息框有自己的 CSS 样式，因此每当我将鼠标悬停在一个信息框上时，就会同时显示所有图像的信息。

所以我的问题是:

有没有一种方法可以创建干净/简单的代码来显示每个图像的相关信息，而不必为每个信息框创建单独的 CSS 样式和 jQuery 代码？

非常感谢任何帮助。谢谢!

Answer 1

 .hover(function () {
        $(this).next(".cap2")
            .show();
    }, function () {
        $(".cap2")
            .hide();
    });

http://jsfiddle.net/8bwSD/2/

更新

正如 Milimetric 指出的，您也可以在悬停功能上使用 next。这应该会提高性能，因为 jQuery 不需要查找 dom 中的所有 .cap2 元素，只需查找 next 元素来隐藏它。

$(document).ready(function () {
    $(".info").hover(function () {
        console.log(this);
        $(this).next(".cap2").show();
    }, function () {
        $(this).next(".cap2").hide();
    });
});

Milimetric的 fiddle 供引用

jsfiddle.net/8bwSD/4