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

jquery弹出菜单三角悬停

1 个答案: