javascript - Jquery鼠标事件替代

Question

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

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

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

我尝试了 mouseenter 和 mouseleav，但它们不起作用。示例 任何帮助将不胜感激:)

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/它使用纯 CSS 做一个下拉菜单，所以当用户没有启用 Javascript 时它也可以工作。

Answer 3

nav您的div 和div之间的边距logo导致了问题。当用户将鼠标指向这些区域之间时，并且您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/