6

JavaScript を使用して画像を非表示にし、その下にあるテキストを表示しています。しかし、スクロールするとテキストが表示されると、コンテナでマウスアウトイベントが発生し、テキストが非表示になり、画像が再び表示され、奇妙なループに陥ります。

html は次のようになります。

<div onmouseover="jsHoverIn('1')"
     onmouseout="jsHoverOut('1')">
    <div id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

そしてJavaScript（scriptaculousを使用）：

function jsHoverIn(id) {
  if(!visible[id]) {
    new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
    visible[id] = true;
  }
}
function jsHoverOut (id) {
  var scope = Effect.Queues.get(id);
  scope.each(function(effect) { effect.cancel(); });

  new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
  new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
  visible[id] = false;
}

これは本当に簡単に思えますが、頭を包むことはできません。

4

6 に答える 6

5

コンテナ div を指定します。

position: relative;

コンテナに 3 番目の div を追加します (コンテナの最後の子にする必要があります)。

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

代わりに、この div で mouseover および mouseout イベントをキャッチします。

子要素がないため、疑似の mouseover および mouseout イベントが伝達されないようにする必要があります。

編集：

私が信じているのは、カーソルが親要素から子要素に移動すると、親要素でマウスアウトイベントが発生し、子要素でマウスオーバーイベントが発生するということです。ただし、子要素の mouseover ハンドラーがイベントをキャッチせず、その伝達を停止しない場合、親要素も mouseover イベントを受け取ります。

于 2008-09-08T13:20:28.900 に答える
4

あなたが本当に望んでいるのはmouseenter/ mouseleave（IE独自のイベントですが、エミュレートするのは簡単です）のように聞こえます：

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

または、prototype.jsにパッチを適用し、自信を持って使用mouseenterします。mouseleaveウィンドウを終了するか、XULchromeに入るチェックを拡張したことに注意してください。これにより、Firefoxのいくつかのエッジケースが修正されたようです。

于 2008-10-13T06:22:52.127 に答える
0

onmouseover イベントを画像 div に配置し、onmouseout イベントをテキスト div に配置するべきではありませんか?

于 2008-09-08T13:12:49.870 に答える
0

これがあなたのスタイリングの残りの部分に適合するかどうかはわかりませんが、テキスト div の css を変更して画像と同じサイズにするか、外側の div のサイズを固定すると、マウスオーバーイベントが発生しても、外側の div のサイズは、mouseout イベントが発生するほどには変化しません。

これは理にかなっていますか？

于 2008-09-08T13:23:48.097 に答える
-1

これは最善の解決策ではないかもしれませんが、最後のアクションが HoverIn または HoverOut であったかどうかを指定するだけの両方のメソッドにアクセスできるグローバル ブール変数を設定できます。このブール変数を使用して、コードを実行するかどうかを決定できます。

if (bWasHoverIn){
   ...
}
于 2008-09-08T12:58:54.083 に答える