javascript - 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 is returning all当您将鼠标悬停在这些图像中的任何一个上时。

尝试更改

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

到

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

对于 mouseout 事件也是如此。

这是一个快速EXAMPLE来帮忙。