CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
adamk22
adamk22

Reputation: 611

fadeTo() fades ALL images instead of the hovered image

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?

Upvotes: 0

Views: 121

Answers (2)

Chase
Chase

Reputation: 29559

Since all images have the .image class on them, jQuery is returning all of those images when you hover over any of them.

Try changing the 

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

to 

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

and same for the mouseout event as well.

Here's a quick EXAMPLE to help.

Upvotes: 5

Sergio
Sergio

Reputation: 28845

Once you have a mouseover event on that element fired you do not need to call the jQuery selector again.

Using $('.image') you will call all elements with that class and apply the fade to them. If you use this instead then you refer only to the element that has the mouse over it. You can try this instead:

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

Upvotes: 2

Related Questions