Andrew Nguyen Andrew Nguyen - 6 months ago 19
jQuery Question

Fade pictures in/out on mouseover

I have a series of pictures with a class of

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>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>

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

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


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").not(this).css("opacity", 0.25);
}, function() {
    $(".player__headshot").css("opacity", 1);