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说明，在悬停时，只需此 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');
});

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

4 个答案: