Question

当鼠标光标距离屏幕左侧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);
    });
});

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。

Answer 2

您的问题是，每次移动鼠标并且鼠标未在菜单上方或距离屏幕右边缘20 px更远时 - 会触发setTimeout。所有这些超时都进入队列并随后开火。这就是你获得“眨眼”效果的原因。

Answer 3

我得到的结果一般不错：

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

Answer 4

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/

Answer 5

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

像这样：

self

CSS

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

JS

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

鼠标在屏幕左侧Jquery时显示菜单

5 个答案: