jQuery悬停仍然触发

Question

我有以下问题。我正在研究一个简单的 jQuery 工具提示，现在我正在处理一些对我来说很奇怪的事情。每次我将鼠标悬停在元素上时，都会触发鼠标悬停和鼠标移出的事件 - 因此工具提示会消失（但如果我继续移交，它会在一秒钟内 很多 闪烁）。这是我的代码。

  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

Answer 1

可能是您的 tooltip-div 覆盖了您的 trigger-div 吗？在这种情况下，出现的 tooltip-div 会触发 trigger-div 的 mouseleave 。至少这就是我在一些 div 之前发生的事情。我通过用不可见的 trigger-div 覆盖所有内容解决了这个问题 - 不是那么漂亮，但对我有用..

Answer 2

首先，为什么不把提示的 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
});