不要在悬停时淡出

Question

此脚本会在没有鼠标移动时淡出 div“#box1”。我试图强制它在光标位于 div“#box1”上方时不淡出，如果在 div 之外没有鼠标移动则继续淡出。我已经为 mouseover() 尝试了 if/else 语句，但我似乎无法让它正常运行。

谁能告诉我如何解决我的愚蠢问题http://jsfiddle.net/YjC6y/2877/

谢谢你

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                console.log("clearTimer");
                clearTimeout(timer);
                timer = 0;
            }

            console.log("fadeIn");
            $('#box1').fadeIn();
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            console.log("fadeout");
            $('#box1').fadeOut()
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 1500)
    });
});

Answer 1

试试这个：这是 fiddle link:jsfiddle.net/b04jsmkf

已添加：

if (!$('#box1').is(':hover')) {

完整功能：

        $(function () {
            var timer;
            var fadeInBuffer = false;
            $(document).mousemove(function () {
                if (!fadeInBuffer) {
                    if (timer) {
                        console.log("clearTimer");
                        clearTimeout(timer);
                        timer = 0;
                    }

                        console.log("fadeIn");
                    $('#box1').fadeIn();
                    $('html').css({
                        cursor: ''
                    });
                } else {
                    fadeInBuffer = false;
                }


                timer = setTimeout(function () {
                    console.log("fadeout");
                    if (!$('#box1').is(':hover')) {
                        $('#box1').fadeOut()
                        $('html').css({
                            cursor: 'none'
                        });
                        fadeInBuffer = true;
                    }
                }, 1500)
            });
        });

Answer 2

已修复，只是在#box 上添加了 mousemove 检查。

$(function () {

var timer;
var isOnBox = false;
var fadeInBuffer = false;



$("#box1").mouseenter(function(){;
    isOnBox = true;
}).mouseleave(function(){
    isOnBox = false;
});


$(document).mousemove(function () {
    if (!fadeInBuffer) {
        if (timer) {
            console.log("clearTimer");
            clearTimeout(timer);
            timer = 0;
        }
        console.log("fadeIn");
        $('#box1').fadeIn();
        $('html').css({
            cursor: ''
        });
    } else {
        fadeInBuffer = false;
    }

    timer = setTimeout(function () {
        console.log(isOnBox);
        if(isOnBox==false){
            console.log("fadeout");
            $('#box1').fadeOut()
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }
    }, 1500)

});
});

不要在悬停时淡出

Do not fadeOut on Hover

css

jquery

hover