鼠标悬停时淡入/淡出图片

Question

我有一系列的一系列图片,.player__headshot现在它正在淡化图像被淹没而不是系列中的其他59个图像.

<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

要解决此问题,您可以选择所有.player__headshot元素并排除当前使用的元素not(),然后再将它们全部淡化mouseleave.

另请注意,您可以更有效地使用hover(); 它更短,使用mouseenter和mouseleave事件代替:

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