Question

我在wordpress上的特色图片上使用.fadeTo（）jQuery效果。我如何设置代码是如果鼠标悬停在图像上，它会渐变到0.7，当鼠标离开时，它会逐渐消失为1：

jQuery(function($) {
$(window).load(function() {
    $('.image').mouseover(function() {
        $('.image').fadeTo('fast', 0.7);
    });
    $('.image').mouseout(function() {
        $('.image').fadeTo('fast', 1); 
    });
});

}）;

给出的类是“.image”，我把它放在wordpress循环中的div中，在特色图像代码上就像这样：

<div class="image"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <!-- If has featured image, GET --></div>

我遇到的问题是，每次我将鼠标悬停在单张图像上时，它会淡化页面上的所有图像。我真正想要的是让它淡化鼠标悬停的图像，我做错了什么？

Answer 1

由于所有图片都有.image类，当您将鼠标悬停在其中任何图片上时，jQuery is returning all都会显示这些图片。

尝试更改

$('.image').fadeTo('fast', 0.7);

到

$(this).fadeTo('fast', 0.7);

同样适用于mouseout事件。

这是一个快速EXAMPLE的帮助。

Answer 2

一旦你对该元素发出鼠标悬停事件，你就不需要再次调用jQuery选择器了。

使用$('.image')，您将调用该类的所有元素并将淡入淡出应用于它们。如果您使用this代替，那么您只能引用鼠标悬停在其上的元素。你可以试试这个：

$('.image').mouseover(function() {
    $(this).fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
    $(this).fadeTo('fast', 1); 
});

fadeTo（）淡化所有图像而不是悬停图像

2 个答案: