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

我希望看到测试＆＃34; true＆＃34;声明打印到控制台，但它没有发生。

最终，我想在第二个函数中包装第一个函数。 如果没有悬停按钮，则执行此按钮的定时淡出。

以下是按钮在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来悬停按钮...
但要跟踪文档上的鼠标移动，需要一个脚本你可以两个都用！ ;）

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

只有当它们目前没有被徘徊时，才会逐渐淡出按钮

1 个答案: