鼠标悬停时淡化图片 in/out

Question

我有一系列 class 为 .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

要解决此问题，您可以 select 所有 .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

下面的代码将淡出具有 class player_headshot

的所有内容

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

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

如果您使用的是 JQuery，或许可以在鼠标悬停或类似操作时从所选图像中删除 class。

鼠标悬停时淡化图片 in/out

Fade pictures in/out on mouseover

javascript

jquery

this

mouseover