Andrew Nguyen Andrew Nguyen - 4 months ago 8
jQuery Question

Fade pictures in/out on mouseover

I have a series of pictures with a class of

.player__headshot
and right now it's fading out the image that's being moused over as opposed to the other 59 images in the series.

<div class="player player--goalie">
<div class="player__headshot player--elder">
<div class="picked is-active">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>


$(".player__headshot").on("mouseover", function(){
$(this).css("opacity", 0.25);
});

$(".player__headshot").on("mouseout", function(){
$(this).css("opacity", 1);
});

Answer

To fix this you can select all the .player__headshot elements and exclude the current one using not(), before fading them all back on mouseleave.

Also note that you can achieve this more effectively using hover(); it's shorter and uses mouseenter and mouseleave events instead:

$(".player__headshot").hover(function(){
    $(".player__headshot").not(this).css("opacity", 0.25);
}, function() {
    $(".player__headshot").css("opacity", 1);
});
Comments