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

【问题标题】：Fade pictures in/out on mouseover鼠标悬停时淡入/淡出图片
【发布时间】：2016-08-04 16:07:10
【问题描述】：

我有一系列带有.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);
});

【问题讨论】：

因为this 指的是被鼠标悬停的元素，所以选择器只是将事件处理程序应用于所有类元素。

标签： javascript jquery this mouseover

【解决方案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);
});

【讨论】：

效果很好。我很好奇你能否详细说明你在另一个函数中选择一个函数，为什么这是解决这个问题的最有效方法？
只是因为代码更短，它使用mouseenter，它只在鼠标进入附加元素时触发一次，而不是mouseover，它会在鼠标移过元素的每个像素时持续触发。请参阅api.jquery.com/hover 了解更多信息

【解决方案2】：

下面的代码会淡出所有有 player_headshot 类的东西

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

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

如果您使用的是 JQuery，可能会在鼠标悬停或类似的情况下从所选图像中删除该类。

【讨论】：