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

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);
});

Answer 2

下面的代码将淡出所有具有类player_headshot 的内容

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

如果您想保持鼠标悬停的图像处于活动状态，则需要更改该图像上的类以防止其受到影响。

如果您正在使用JQuery，也许可以在mouseover上从所选图像中删除该类或类似的东西。