0

我已经建立了一个弹出菜单,并且在 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);
});
4

1 回答 1

0

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});
于 2013-12-10T15:34:28.473 回答