0

この答え：

要素がオーバーレイされたときに mouseout イベントをキャンセルする

どこか近くになりますが、それは私の問題を逆転させるようなものであるため、実際には私が求めているものではありません.

Facebookの画像ビューアに似た画像ギャラリーを作っています。

div画像は、画面の中央に配置され、メイン ページの上に z-index 値で浮動する絶対配置に読み込まれます。

画像の左右には、div絶対位置の小さな要素がz-indexあり、画像よりも 1 高くなります。これらのdiv要素は、ギャラリーをクリックするための左右の矢印です。

画像が読み込まれると矢印は非表示になりますが、ユーザーがマウスを画像の上に移動すると、矢印がフェードインし、再び離れるとフェードアウトします... Facebook ビューアーと同じように。

私はhoverIntentこれを達成するために使用していますが、うまくいきます。

しかし...ユーザーがマウスを矢印divに移動すると、これが下にある画像hoverIntentのイベントとして表示され、矢印が非表示になります...mouseleave

だから...私が必要とするhoverIntentのは、矢印divを無視できるようにすることです。

私が使用しているコードhoverIntentは非常に単純です。

        function showArrows() {
            $('.imgNav').fadeIn(500);
        };
        function hideArrows() {
            $('.imgNav').fadeOut(500);
        };
        $(img).hoverIntent(showArrows, hideArrows);

明らかimgに jQuery 画像オブジェクトであり.imgNav、矢印のクラス名です。

編集：

ここに作成しましfiddleた：http://jsfiddle.net/jhartnoll/cE6gu/

4

1 に答える 1

0

フィドルの例を使用して、変更します

$('.enlarged').hoverIntent(showArrows, hideArrows);

に

$('.imgViewer').hoverIntent(showArrows, hideArrows);

私のためにトリックをしましたhttp://jsfiddle.net/cE6gu/4/

hoverintent Webサイトでは、子を無視するように設計されていると記載されているため（ここ）、これらすべてのdivを含む親要素でhoverintentを呼び出す必要があります。

于 2012-12-06T16:35:32.217 に答える