Question

FIDDLE＆gt;＆gt; 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的小提琴作为参考

jsfiddle.net/8bwSD/4

Answer 2

尝试：

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

Updated fiddle here.

jQuery在鼠标悬停在其他特定元素上时显示不同的元素（div）

2 个答案: