如何防止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 s并淡入/淡出它们。 上面的代码表示，每个a.cboxElement ，悬停，找到span只是这个 a.cboxElement和/淡入淡出它。

Answer 2

此外，您可以将.fadeToggle与单个函数一起使用：

$("a.cboxElement").hover(function(){
    $(this).find("span").fadeToggle("fast");
});

Answer 3

为每个图像分配一个id="..."属性并选择它而不是整个a.cboxElement类：

<img id="imageid1" ... >
$('#imageid1')....

Answer 4

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