javascript - 仅当当前未将鼠标悬停在按钮上时才逐渐淡出按钮

Question

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

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

我希望看到测试“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>

Answer 1

您可以使用 CSS 来实现按钮悬停...
但要跟踪鼠标在文档上的移动，需要一个脚本。
您可以同时使用! ;)

// To track mouse movement and fadein all buttons
var timer;

$(document).on("mousemove",function(){
  $(".fader").addClass("faderShowOnMouseMove");
  if(typeof(timer)!="undefined"){
    clearTimeout(timer);
  }
  
  timer = setTimeout(function(){
    $(".fader").removeClass("faderShowOnMouseMove");
  },1000);
});

/* Base style for buttons */
.fader {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

/* For single button hovering */
.fader:hover {
  opacity: 1;
}

/* Used with JS mouse movement */
.faderShowOnMouseMove{
  opacity: 1;
}

/* Just for this demo ;) */
.swiper-pagination{
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Swiper -->
<div ng-show="show" class="swiper-container">
  <div class="swiper-wrapper">
    Hover over here! <i>(right below this text)</i><br>
    <div class="swiper-pagination">
      
      <!--The buttons-->
      <button class="fader">1</button>
      <button class="fader">2</button>
      <button class="fader">3</button>
    </div>
  </div>
</div>