3

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

这段代码不适合我。

$(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);
    });
});
4

5 回答 5

6

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

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。

这是一个完整的演示。

于 2013-08-01T15:46:40.307 回答
0

做这样的事情我得到了一般不错的结果：

$(document).ready(function(){
    $("#lmenu").hide(300);
    $("#lmenu").mouseover(function(){
       $(this).data("hover",true); 
    }).mouseout(function(){
        $(this).removeData("hover");
    });
    $(document).mousemove(function(e){
        console.log(e.pageX);
        if ((e.pageX < 20 || $("#lmenu").data("hover")) && !$("#lmenu").data("displayed")) {
            window.clearTimeout(window.hideMenu);
            $("#lmenu").stop().show(200).data("displayed",true);
        } else if ($("#lmenu").data("displayed")) {
            window.clearTimeout(window.hideMenu);
            $("#lmenu").removeData("displayed");
            window.hideMenu = window.setTimeout(function(){
                $("#lmenu").stop().hide(200);
            },2000);
        }
    });
});

小提琴：http: //jsfiddle.net/zXDB3/

于 2013-08-01T15:47:15.993 回答
0

的HTML：

<div id="menuHidden" class="menu"></div>

CSS：

#menuHidden{
    height:200px;
    width:200px;
    background-color:purple;
    position:absolute;
    left:0;
    top:0;
    display:none;
}

jQuery：

$(document).on("mousemove", function(e){
    if(e.pageX <= 100)
    {
        $("#menuHidden").show();
    }
    else
    {
        if(!$(e.target).is(".menu"))
        {
            $("#menuHidden").hide();   
        }
    }
});

它的外观：http: //jsfiddle.net/nnmMe/

于 2013-08-01T15:50:50.953 回答
0

您的问题是，每次您移动鼠标并且鼠标不在菜单上方或距离屏幕右边缘 20 px 时，都会触发 setTimeout。所有这些超时都会进入队列并在之后随意触发。这就是为什么你会得到“闪烁”效果。

于 2013-08-01T15:39:49.273 回答
0

我更喜欢使用元素（透明）并在其上捕获悬停事件。

像这样：

 <aside class="bar hover-me"></aside>

css

.bar {
        background-color: transparent;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;  
        z-index: 1;
        width: 20px; 
    }

js

$('.hover-me').mouseover(function(){
    $("#lmenu").show();
});
$("#lmenu").mouseleave(function(){ $(this).hide(); })
于 2015-07-23T22:29:32.383 回答