Question

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

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

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

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

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

Answer 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
  });

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

1 个答案: