我已经建立了一个弹出菜单，并且在 mouseover mouseleave mousemove 时遇到了一些问题。对于方向，我使用三角形作为第一层（在链接内）。一切正常。如果我在链接上方，弹出窗口会打开，但是当我通过三角形时，菜单会关闭并再次打开。我不明白为什么，因为三角形是链接的一部分。
<a href="#" class="ml1a">Level 1<span class="arrow"></span></a>
$('.ml1a').mouseover(function(){
var num = this.id.replace('ml1aButton-','');
$(this).parent('li').addClass('ml1liHover');
$('.navMainOverlay').hide();
$('#mainNavOverlay-'+num).fadeIn(300);
});
You seem to have placed your arrow inside the link with the mouseover effect.
<a href="#" class="ml1a">Level 1<span class="arrow"></span></a>
It will trigger when you move your mouse over Level 1 or <span class="arrow"></span>.
Edit
A few options that comes to mind:
1)
Enclose Level 1 and the arrow in a container, then only add mouseover to Level 1. Then you can position the arrow in relation to the container instead of the link.
<div><a href="#" class="ml1a">Level 1</a><span class="arrow"></span></div>
2)
Add stopPropagation to the mouseover event of the arrow. This way everything else will be ignored when moving the mouse over the arrow.
$('.arrow').mouseover(function(event) {
event.stopPropagation();
});
3)
Absolute position the arrow with jQuery. Probably not the way I would go with, but it's an option.
$('.arrow').css({top: positionOflink.top + 20, left: positionOflink.left + 50});