0

I'm using the .fadeTo() jQuery effect on the featured images on wordpress. How I have setup the code is that if the mouse hovers over the image, it fades to 0.7, when the mouse leaves, it fades back to 1:

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

});

The class given is ".image" and I have put it in a div within the wordpress loop on the featured image code likes this:

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

The problem that I'm running into is that every time I'm hovering over a SINGLE image, it fades ALL images on the page. What I really want is to have it fade the image that my mouse is hovering over, what am I doing wrong?

4

2 回答 2

5

由于所有图像都有.image类，当您将鼠标悬停在其中任何图像上时，jQuery 会返回所有这些图像。

尝试更改

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

至

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

mouseout 事件也一样。

这是一个可以提供帮助的快速示例。

于 2013-08-26T19:15:53.357 回答
2

一旦在该元素上触发了 mouseover 事件，您就不需要再次调用 jQuery 选择器。

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

$('.image').mouseover(function() {
    $(this).fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
    $(this).fadeTo('fast', 1); 
});
于 2013-08-26T19:15:37.140 回答