仅当按钮当前未被悬停时才逐渐淡入它们

Question

I have forward and backward buttons for an image gallery. Currently, they fade away when the mouse is idle. Any movement on the page will show them again. Here's the code:

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

This works fine, but I also would like the buttons to not fade out at all if they are currently being hovered.

As a test, I've tried this code:

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

I'm hoping to see the test "true" statement printed to the console, but it's not happening.

Ultimately, I'd like to wrap the first function in the second. If buttons are not being hovered over, then perform this timed fadeout of buttons.

---

Here is where the buttons are in the 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

You can use CSS for the button hovering...
But to track mouse movement on the document, a script is needed.
You can use both! ;)

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