Fade Bilder in/out mit der Maus darüber

Question

Ich habe eine Reihe von Bildern mit einer Klasse von .player__headshot und jetzt es ist das Bild ausgeblendet, die in der Serie zu den anderen 59 Bildern im Gegensatz zu werden moused sind vorbei.

<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 1

dies beheben Sie alle .player__headshot Elemente und verstehen sich inklusive der aktuellen not() verwenden, bevor sie alle wieder auf mouseleave Verblassen auswählen können.

Beachten Sie auch, dass Sie diese effektiv hover() mit mehr erreichen können; es ist kürzer und verwendet mouseenter und mouseleave Ereignisse statt:

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

Answer 2

Der folgende Code wird alles ausgeblendet, die die Klasse player_headshot

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

Wenn Sie das Bild behalten möchten hat Sie über aktive moused haben, Dann müssen Sie die Klasse für dieses Bild ändern, um zu verhindern, dass es beeinträchtigt wird.

Wenn Sie JQuery verwenden, entfernen Sie vielleicht die Klasse aus dem ausgewählten Bild mit der Maus darüber oder so ähnlich.