jquery-hover - 如何防止 jQuery .hover 函数同时影响所有图像？

Question

我不确定标题是否足够好地解释它，但我试图保持简短!

因此，我在页面上散布了许多图像，并为它们创建了一个灯箱画廊(.cboxElement 是调用它的类)。我想添加的是对受灯箱影响的每个图像的悬停效果，以便用户知道它可以缩放。

问题:

我没有为该网站编写原始代码，这是一项新功能。由于图像之间的类不一致，我必须在每个图像之前添加一个标签，并使用唯一的类供悬停方法引用，如下所示:

    $("a.cboxElement").each(function(){
        $(this).prepend("<span class='zoom'></span>");
    });

紧接着，我使用了悬停效果:

    $("a.cboxElement").hover(function(){
        $("a.cboxElement span").fadeIn('fast');
    },
    function(){
        $("a.cboxElement span").fadeOut('fast');
    });

问题是，当我将鼠标悬停在页面上的图像上时，悬停效果会同时出现在每个图像上，并且我无法弄清楚如何让它只影响我悬停的图像。

有人知道我能做什么吗？

非常感谢，

乔恩

Answer 1

我认为您只需要更改悬停分配的范围:

$("a.cboxElement").hover(function(){
    $(this).find("span").fadeIn('fast');
},
function(){
    $(this).find("span").fadeOut('fast');
});

您的原始代码是这样说的:对于每个 a.cboxElement，找到所有 a.cboxElement 元素的 span 并将它们淡入/出去。上面的代码表示，对于每个 a.cboxElement，悬停时，找到 this a.cboxElement 的 span并淡入/淡出。