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

マウスオーバー効果でリンク内に矢印を配置したようです。

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

矢印の mouseover イベントに stopPropagation を追加します。このようにして、マウスを矢印の上に移動すると、他のすべてが無視されます。

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

3)

jQueryで矢印を絶対配置。おそらく私が行く方法ではありませんが、それはオプションです。

$('.arrow').css({top: positionOflink.top + 20, left: positionOflink.left + 50});
于 2013-12-10T15:34:28.473 に答える