jquery弹出菜单三角形悬停

Question

我已经构建了一个弹出式菜单，并且在 mouseover mouseleave mousemove 时遇到了一些问题。对于方向，我使用三角形作为第一层（在链接内）。一切正常。如果我在链接上方，弹出窗口会打开，但是当我通过三角形时，菜单会关闭并再次打开。我不明白为什么，因为三角形是链接的一部分。

here the example

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

Answer 1

您似乎已将箭头放置在具有鼠标悬停效果的链接内。

<a href="#" class="ml1a">Level 1<span class="arrow"></span></a>

当您将鼠标移到Level 1 或<span class="arrow"></span> 上时会触发。

编辑

想到的几个选项：

1)

将Level 1 和箭头放在一个容器中，然后只将鼠标悬停添加到Level 1。然后您可以相对于容器而不是链接来定位箭头。

<div><a href="#" class="ml1a">Level 1</a><span class="arrow"></span></div>

2)

将 stopPropagation 添加到箭头的 mouseover 事件。这样在将鼠标移到箭头上时，其他所有内容都将被忽略。

$('.arrow').mouseover(function(event) {
    event.stopPropagation();
});

3)

使用 jQuery 绝对定位箭头。可能不是我会采用的方式，但这是一种选择。

$('.arrow').css({top: positionOflink.top + 20, left: positionOflink.left + 50});