fadeTo()淡化所有图像而不是悬停图像

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会返回所有这些图像.

尝试改变

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

至

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

同样适用于mouseout事件.

这是一个快速的示例来帮助.