Question

我有一个显示悬停子菜单的菜单。我的问题是，当页面加载时，如果鼠标位于任何菜单元素之上，则会触发悬停事件。我想要发生的是，在初始页面加载时，如果鼠标位于其中一个菜单元素上，则不会触发悬停事件;如果鼠标不在菜单元素上，那么一旦用户鼠标悬停在菜单元素上，就会触发正常的悬停事件。

提前感谢您提供任何帮助，乙

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

Answer 2

阻止悬停元素的默认行为。

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

Answer 3

使用hoverIntent jquery plugin。您可以延迟对该事件的响应。因此，当鼠标结束时，事件不会立即触发。

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

3 个答案: