如果鼠标没有超过元素onload,则jQuery隐藏

时间:2010-10-08 15:17:34

标签: jquery

如果我有一个菜单,出于可访问性原因,在页面加载时可见(因此如果EU没有启用JS,那么他们仍然可以导航),但我想隐藏它,如果他们这样做启用JS,然后它很容易,只需隐藏它。但是,如果事件触发时鼠标位于元素上,我希望它保持打开状态。

问题是(无论如何,我认为这也适用于其他浏览器),如果鼠标没有移动,没有任何事件从鼠标触发以识别它当前在菜单上是否有效?

$(function(){
  $("#myMenu").animate({"width": 'toggle'}, 350).hide();
});

我也尝试将它直接放入窗口加载事件中,但这不起作用,因为事件参数对象显示window是当前目标,而不是鼠标当前所在的元素,由于窗口加载等待图像等所有问题,这也不好。

$(window).load(function(e){
  console.log(e);
  $("#myMenu").animate({"width": 'toggle'}, 350).hide();
});

1 个答案:

答案 0 :(得分:1)

为什么不在鼠标移动之前无限期地显示它,然后检查鼠标是否在它上面并隐藏它是否不是?

将mousemove事件附加到窗口,然后检查它是否在DOM元素上:

  $(window).mousemove(function(event) {
    var mouse_x = event.pageX;
    var mouse_y = event.pageY;

    // then get position and height/width of menu's DOM element, hiding if the mouse isn't in it
  });