Javascript「onMouseOver」は子供向けにトリガーされますか？

StackOverflow https://stackoverflow.com/questions/308175

質問

これが使用しているjQueryの結果であるかどうかはわかりませんが、これは私がやろうとしていることです：

<div class="info" style="display: inline;" 
  onMouseOut="$(this).children('div').hide('normal');" 
  onMouseOver="$(this).children('div').show('normal');"
>
  <img src="images/target.png">
  <div class="tooltiptwo" id="tooltip" 
    style="font-weight: normal; font-size: 0.8em;" >TOOLTIP TEXT</div>
</div>

基本的なCSSとjQueryに精通している人なら、簡単なアニメーションをツールチップに追加しようとしています。問題は、そのようなアニメーションのトリガーです。アニメーションが発生したときに、ユーザーがマウスをツールチップ上に移動すると、ユーザーがマウスを離すまで、アニメーションは表示と非表示のループに入ります。これは望ましくない効果です。マウスが parent divから移動すると、アニメーションが一度だけ消えてしまいます。ツールチップが親divから離れて表示されるようにCSSを配置しましたが、アクションがトリガーされるのは親だけであり、その子ではありません。

それで基本的に、これを達成するにはどうすればいいですか？親要素のホバー/アウト状態が、子のホバー/アウト状態が何もしないで、その親の子で機能（アニメーション）をトリガーするようにします。 onMouseOverとonMouseOutの通常のメソッドは、そのメソッドが属する親の子に対してもトリガーされているように思われます。

jQueryを初めて使用することに注意してください（これまでのところ驚くべきことですが、できればサイトをその良さで覆いたいです）。jQueryを使用してホバー/アウト状態を達成するより良い方法がある場合はそれらについて知りません。 ^ _ ^

ありがとう

役に立ちましたか？

解決

編集：実際、これははるかに優れたソリューションです（クレジット）：

$('.info').bind('mouseenter', function() {
    $('div', this).show('normal');
});

$('.info').bind('mouseleave', function() {
    $('div', this).hide('normal');
});

// hide the tooltip to start off
$('.info div').hide();

edit2 ：コメントに応じて、HTMLを別の方法で構成するか、イベントを兄弟要素（画像）にバインドすることをお勧めします。

<div class="info">
    <img src="stuff.jpg" />
</div>
<div class="tooltip"></div>

または画像のバインド：

$('.info img').bind('mouseenter', function() { etc... });
$('.info img').bind('mouseleave', function() { etc... });

他のヒント

これは、マウスイベントに関する優れた記事です。 http://www.quirksmode.org/js/events_mouse.html

この チュートリアル ？

特にmousemoveパーツ。カーソルの隣にツールチップを揃えるために、常に左と上に位置決め値を設定します。 XおよびY座標は、.pageXおよび.pageYを介して呼び出されます。また、ツールチップがカーソルの真下にないように、15ピクセルの小さなオフセットを追加します。

そのようにして、マウスをツールチップの上に置くことはできません。フェードアウト段階であってもできません。したがって、無限ループはありません

親divにバインドし、stopPropagationを使用してツールチップにバインドされないようにします。このように：

[コード] $（ '。info'）。bind（ 'mouseover'、function（e）{ e.stopPropagation（）;     $（this＆gt; 'div'）。show（ 'normal'）; }）;

$（ '。info'）。bind（ 'mouseout'、function（）{     $（this＆gt; 'div'）。hide（ 'normal'）; }）;

//ツールチップを非表示にして開始 $（ '。info div'）。hide（）; [/ code]

しかし、私もpageXとpageYを使用して、カーソルでツールチップを移動させます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top