Question

我想让我的导航栏仅在鼠标移动时出现，否则不会被看到。它是固定的。我尝试使用

$（“html”）.mousemove（function（）{

等...

但即使我完全离开鼠标鼠标移动，它似乎也会注册。可能会让这有点棘手的是，当鼠标移动到文档中的任何位置时，我希望导航栏出现，而不仅仅是在导航栏区域中。只要不移动鼠标，就不应该看到导航栏。

这个想法基本上只是在用户移动鼠标时显示导航栏（表示有意改变某些内容），否则会分散内容。

Answer 1

你可以这样做：

<强> HTML

<div>navbar</div>

<强> JAVASCRIPT

$("div").hide();

$("html").mousemove(function( event ) {
    $("div").show();

    myStopFunction();
    myFunction();
});

function myFunction() {
    myVar = setTimeout(function(){
        $("div").hide();
    }, 1000);
}
function myStopFunction() {
    if(typeof myVar != 'undefined'){
        clearTimeout(myVar);
    }
}

http://jsfiddle.net/guinatal/GRyEe/2/

Answer 2

我建议使用可以执行两项操作的函数来处理mousemove：

显示导航栏
使用在短暂间隔后隐藏导航栏的函数设置超时。

第二位代码应首先取消为隐藏导航栏而设置的任何超时。

结果将是鼠标移动时出现的导航栏，当鼠标闲置一段时间后消失。

这基本上是@guinatal刚刚提供的代码。

鼠标移动时出现的导航栏和静止时消失的导航栏

2 个答案: