Javascript 仅当按钮当前未悬停在上方时，才逐渐淡入淡出状态

我有图像库的前进和后退按钮。目前，当鼠标空闲时，它们会消失。页面上的任何移动都将再次显示它们。代码如下：

//fade out previous/next buttons on mouse idle
var timer;
$(document).mousemove(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }
    $('.fader').fadeIn();
    timer = setTimeout(function() {
        $('.fader').fadeOut(1500)
    }, 1000)
})

这很好，但我也希望按钮不褪色，如果他们目前正在悬停

作为测试，我尝试了以下代码：

//both buttons are stored in class .fader

//when buttons are hovered over
$(".fader").hover(
    function(){
        //give them this class
        $(this).toggleClass('is-hover');
    })

//if buttons have .is-hover class, print test statement to console
if($(".fader").hasClass('is-hover')){
    console.log("true");
}

我希望看到test-true语句被打印到控制台上，但是它没有发生

最后，我想将第一个函数包装到第二个函数中。如果按钮未悬停在上方，则执行此按钮的定时淡出

以下是按钮在HTML中的位置：

<!-- Swiper -->
<div ng-show="show" class="swiper-container">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>

    <!--The buttons-->

    <div class="swiper-button-next fader"></div>
    <div class="swiper-button-prev fader"></div>
</div>

---

您可以使用CSS的按钮悬停。。。 但是要在文档上跟踪鼠标移动，需要一个脚本。 你可以两者都用

//跟踪鼠标移动并淡入所有按钮 无功定时器； $document.onmousemove，函数{ $.fader.addClassFaderShownMouseMove； iftypeoftimer！=未定义{ cleartimeoutimer； } 定时器=设置定时器输出功能{ $.fader.removeClassFaderShownMouseMove； },1000; }; /*按钮的基本样式*/ .推子{ 不透明度：0； 过渡：不透明度1s缓进缓出； -moz过渡：不透明度1s缓进缓出； -webkit转换：不透明度1s易入易出； } /*用于单键悬停*/ .音量控制器：悬停{ 不透明度：1； } /*用于JS鼠标移动*/ .FadershownMouseMove{ 不透明度：1； } /*只是为了这个演示*/ .swiper分页{ 边框：1px纯黑； } 停在这里！在这篇文章的正下方 1. 2. 3.

---

你能加入你的html代码吗？当然，等一下。好的，我已经添加了html。我知道你正在试图在jquery中找到答案，但我很好奇为什么你不想使用css来实现这一点，特别是如果它只是一个悬停淡入/淡出？事实上，您的按钮不在淡入淡出的div中。这些按钮有一个淡入淡出类。任何元素都有。淡入淡出类的行为与此类似，如果父级可见。我编辑过。我认为我想使用javascript的主要原因是跟踪鼠标的任何移动，并且每当鼠标移动时，前进和后退按钮都会重新出现。这就是我使用JavaScription的原因。如果我能在CSS中跟踪mousemove，这可能会起作用。对不起，我不认为我在这个问题上是清楚的。我将编辑这个问题。