jQuery：如果鼠标在元素上，则在初始页面加载时删除悬停状态

Question

我有一个菜单，在鼠标悬停时显示子菜单。我的问题是，当页面加载时，如果鼠标在任何菜单元素上方，就会触发悬停事件。我希望在初始页面加载时，如果鼠标在菜单元素之上，则不会触发悬停事件；如果鼠标不在菜单元素之上，则用户将鼠标移到菜单元素上后正常的悬停事件会触发。

感谢您提前的任何帮助， B

- bflemi3

Answer 1

@Mörre 的想法很好，这里有一个灵感，可以使用jQuery：

$(document).ready( function() {
    // sets a loaded class on your menu when DOM is loaded (you could also try the $(window).load event)
    $('#menu').addClass('loaded');

    // add the hover event on the links of your menu only if the menu has the loaded class
    $('#menu.loaded a').live('mouseover mouseout', function(event) {
                if (event.type == 'mouseover') {
                    // do something on mouseover
                } else {
                    // do something on mouseout
                }
            });
        });

- Capsule

---

这是我最初的代码，我们遇到的问题是，如果鼠标在页面加载时没有悬停在元素上，那么当用户首次将鼠标悬停在该元素上时，悬停事件不会触发。 我正在尝试的做法基本上是在页面加载后，如果鼠标悬停在元素上，则解除绑定悬停事件。 - undefined

啊，抱歉，我们需要使用live()，否则类将在稍后添加，而$('#menu.loaded a')在我们定义hover事件时不存在。我已经编辑了代码。 - undefined

Answer 2

阻止悬停元素触发默认行为。

$("menuElementSelector").hover(function(e){
 e.PreventDefault();
});

- Peter Olson

---

但是，我该如何在页面加载时以及只有当鼠标悬停在该元素上时执行此操作？ - undefined

Answer 3

使用hoverIntent jquery插件。您可以延迟事件的响应。因此，当鼠标悬停时，事件不会立即触发。

- Jepser Bernardino

---

期望的结果不是延迟悬停事件，而是在页面加载时，如果鼠标最初位于菜单元素上，则完全解除其绑定。 - undefined

但我认为这是一种不显眼的方法，1. 可以实现你想要的效果，2. 避免鼠标悬停错误。 - undefined