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内部。

'info'框（将要悬停在其上）也在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的小提琴作为参考

jsfiddle.net/8bwSD/4

Answer 2

尝试：

$(".info").hover(function () {
    $(this).closest(".imgcontainer").find(".cap2").show();
}, function () {
    $(this).closest(".imgcontainer").find(".cap2").hide();
});

这里更新了小提琴。