Question

好吧，如果我在#nav div之外点击，下面的代码可以正常工作。我问是否可以将鼠标移离#nav div以使其消失。我不想'点击'来隐藏div。 Example

 $(document).mouseup(function (e)
    {
        var container = $("#nav");

        if (container.has(e.target).length === 0)
        {
            container.hide();
        }
    });

我尝试了mouseenter和mouseleav，但它们不起作用。 Example 任何帮助将不胜感激：）

Answer 1

试试这个：

$(document).ready(function(){
   $("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });

   $("#nav").mouseleave(function (e){
       $(this).fadeOut("slow");
   });
});

Answer 2

您需要在导航栏上添加鼠标，我已将其添加为您检查下面的链接

$(document).ready(function(){
$("#logo").mouseenter(function() { $("#nav").fadeIn("slow"); });
});

$("#nav").mouseleave(function (e)
{
       $("#nav").fadeOut('fast');
});

http://jsfiddle.net/sKpwV/6/

如果你想制作一个下拉菜单，我建议你看看这里的链接：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/它使用Pure CSS下拉，所以当用户没有启用Javascript时它也会工作。

Answer 3

nav div和logo div之间的差距导致问题。当用户将鼠标指向这些区域之间，并且您已在mouseout div上严格设置nav事件时，会导致窗口关闭。解决方案是添加一个小超时，以允许用户在关闭菜单之前浏览菜单。这将避免用户意外地将鼠标拖到导航边缘并且可能是div之外的一个或两个像素的其他情况。

这是我用来解决这个问题的jQuery：

$('#nav').mouseover(function () {
    clearTimeout($.data(this, 'mouseOutTimer'));
});
$('#nav').mouseout(function () {
    clearTimeout($.data(this, 'mouseOutTimer'));
    $.data(this, 'mouseOutTimer', setTimeout(function () {
        $("#nav").hide();
    }, 700));
});

http://jsfiddle.net/HyUEu/

Jquery鼠标事件替代

3 个答案: