jquery - 当鼠标位于屏幕左侧时显示菜单 Jquery

Question

当鼠标光标靠近屏幕左侧 20 像素时，我尝试显示左侧菜单。我希望当鼠标悬停在菜单上时菜单保持打开状态。

这段代码不适合我。

$(document).ready(function(){
    $("#lmenu").hide(300);
    $(document).mousemove(function(e){
        if(e.pageX<20 || $("#lmenu").is(':hover')) $("#lmenu").show(200);//html(e.pageX +', '+ e.pageY);
        else if(!$("#lmenu").is(':hover')) setTimeout(function(){ $("#lmenu").hide(200); }, 2000);
    });
});

Answer 1

您可以使用类似于以下的代码:

var menu = $('.menu');
var menuTimeout = null;

$(window).on('mousemove', mouseMoveHandler);

function mouseMoveHandler(e) {
    if (e.pageX < 20 || menu.is(':hover')) {
        // Show the menu if mouse is within 20 pixels
        // from the left or we are hovering over it
        clearTimeout(menuTimeout);
        menuTimeout = null;
        showMenu();
    } else if (menuTimeout === null) {
        // Hide the menu if the mouse is further than 20 pixels
        // from the left and it is not hovering over the menu
        // and we aren't already scheduled to hide it
        menuTimeout = setTimeout(hideMenu, 2000);
    }
}

函数 showMenu 和 hideMenu 的作用应该很明显。

这是完整的 demo .