1

次の問題があります。私は単純なjQueryツールチップに取り組んでいますが、今は私にとって奇妙なことを扱っています。要素にマウスオーバーするたびに、マウスオーバーとマウスアウトの両方のイベントがトリガーされるため、ツールチップが消えます（ただし、手を離し続けると、1秒間に多くの点滅が発生します）。私のコードがあります。

  var hint = $('<div id="hint-wrap"><div id="hintbox-top"><div id="hintbox-bottom"><div id="hintbox-topleft"><div id="hintbox-bottomleft"><div id="hint-innerwrap"><div id="hint"></div></div></div></div></div></div></div>'); // Funny I know :-D

  hint.hide();
  $('body').append( hint ); // I append it

  $('.hashint').hover(function(e){   

// Set position to cursor's
hint.css( 'left', e.pageX );
hint.css( 'top', e.pageY - 60 );

// animated append
hint.css( 'opacity', 0.2 );
hint.show();
hint.animate( { 'opacity' : 1 }, 100 );

// set text
$( "#hint" , hint).html( $( '#' + $(this).attr( 'id' ) + '-hint' ).html() ); 

 },
 function(){ // there is the problem
    hint.hide();
  });

そしてHTML：

<div id="usernamelabel-hint" class="hinttext">Lorem Ipsum is simply dummy text of the printing and type.Lorem. <a href="#">Sign up!</a></div> <!-- This is hint text (and code) -->
<p><label><span class="hashint" id="usernamelabel">Username</span><span class="asterisk">*</span></label> <!-- ... stuff --> </p>

マウスアウトイベントがまだ私のボックスをトリガーして非表示にしている理由を誰かが知っていますか？

どうもありがとう、Ondrej

4

2 に答える 2

1

まず、ヒントのHTMLをHTMLドキュメントに入れてみませんか？
そして、CSSでdisplay：noneを設定しましたか？
次に、ヒントを表示するときに、hint.showまたはを使用できますhint.fadeIn。

$.mouseenterと$.mouseleaveを使用します。

例：

$.('#usernamelabel-hint').mouseenter(function() { 
  // show or fade inn hint text
});

$.('#usernamelabel-hint').mouseleave(function() {
  // Hide or fade out hinttext
});
于 2010-01-10T16:33:32.727 に答える
1

ツールチップ-divがトリガー-divをオーバーレイしている可能性がありますか？その場合、表示されるtooltip-divは、trigger-divのマウスリーブをトリガーします。少なくとも、数div前に私に起こったことです。私はすべてを目に見えないtrigger-divでオーバーレイすることでその問題を解決しました-それほど美しくはありませんが、私のために働きました。

于 2010-01-10T16:40:24.843 に答える