1

これが私が使用している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 に精通している人には、簡単なアニメーションをツールチップに追加しようとしています。問題は、そのようなアニメーションのトリガーです。アニメーションが発生したときに、ユーザーがマウスをツールチップの上に移動すると、ユーザーがマウスを離すまでアニメーションが表示と非表示のループに入るようです。マウスが親divの外に移動したときにアニメーションを一度だけ消したいので、これは望ましくない効果です。ツールチップが親 div から離れて表示されるように CSS を配置しましたが、アクションは親でのみトリガーされ、その子ではトリガーされません。

基本的に、これを達成するにはどうすればよいですか？親要素のホバー/アウト状態が、子のホバー/アウト状態が何もせずに、その親の子で関数 (アニメーション) をトリガーするようにします。onMouseOverandの通常のメソッドはonMouseOut、そのメソッドが属する親の子に対してもトリガーしているように見えます。これは、かなり望ましくない影響を引き起こしています。

私はjQueryを初めて使用することに注意してください（これまでのところ驚くべきことですが、できれば自分のサイトをその良さで覆いたいと思っています）、jQueryを使用してホバー/アウト状態を実現するより良い方法があるかどうかはおそらくわかりませんそれらについて。

4

3 に答える 3

6

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

$('.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... });
于 2008-11-21T08:45:29.120 に答える
0

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

[コード] $('.info').bind('mouseover', function(e) { e.stopPropagation(); $(this > 'div').show('normal'); });

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

// ツールチップを非表示にして開始 $('.info div').hide(); [/コード]

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

于 2010-09-18T12:20:42.903 に答える
0

このチュートリアルに従いましたか?

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

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

于 2008-11-21T08:39:39.257 に答える