0

ページのすべての要素にバインドされた「onmouse over」もあります。マウスが要素の上にある場合、最も近い関連要素に赤い境界線を描画します (例としてaardvarkを試してください)。

私は次のコードを持っています:

<p>
<img height="333" width="250" title="Image par hyperbolic pants explosion sous licence CC - http://www.flickr.com/photos/74502564@N00/2716444681/" class="illustred" src="context-selector-test_files/rha_20090929_antivirus.jpg" />
Ah là là... ces abrutis qui continuent à refuser d'installer des antivirus parce que "
<em>
Je ne télécharge pas !
</em>
" ou "
<em>
Je ne vais que sur des sites de confiance.
</em>
</p>

「P」の中に「img」が入っているのがわかります。

予想される動作は、「P」を超えると境界が付けられ、「IMG」に移動すると境界が「IMG」に移動することです。

そうではありません。

私は CSS を使用していないため、問題は CSS ではありませんが、要素の周囲に「絶対」の位置にある 4 つの境界線をシミュレートする 4 つの div です。これは次に来るもののために必須です。

「IMG」に移動すると問題が発生し、「マウスオーバー」が実際にトリガーされますが、直後に「マウスオーバー」が「P」で再びトリガーされます。「P -> IMG」は理解できますが、「IMG -> P」は私を悩ませます。そして、なぜ、1行で2回マウスオーバーするのですか？私はマウスを動かさなかった。

今、私は何が欠けていますか？

スペック：

  • html 4;
  • CSS2;
  • jquery 1.3;
  • Firefox 3.5;
  • Ubuntu 9.04;
  • コーヒー 1.50 (l).
4

3 に答える 3

1

イベントバブリングに巻き込まれています。

mouseoverの代わりにmouseenter()を使用します。

于 2009-10-05T15:29:58.010 に答える
1

マウスオーバー ハンドラーでイベントの伝播を停止します。

$('selector').mouseover( function(e) {
    ...
    e.stopPropagation();
});

hover( )メソッドまたはhoverIntent()プラグインの使用を検討することもできます。後者は、イベント ハンドラーが呼び出される前に一定時間待機することでページ上でマウスをドラッグするだけなので、点滅を減らすのに役立ちます。

于 2009-10-05T15:32:39.617 に答える
0

わかりました、自殺したいのですが、これが答えです。

私はばかげてイベントの伝播を停止するのを忘れていました. 「onmouseover」がトリガーされたときに呼び出されるコールバック関数は、もちろん、それが仕事をしたかどうかを返す必要があります。イベントをそれ以上バブルさせたくない場合は、「false」を返します。

さて、この話題に 3 時間費やした後、すみません、首を吊るさなければなりません。乾杯。

PS : SO 担当者全員を Community Wiki に遺贈します。

于 2009-10-05T15:39:30.283 に答える