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，可能会在鼠标悬停时从所选图像中删除该类或类似的东西。

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

2 个答案: