jQuery悬停仍在触发

jQuery悬停仍在触发,jquery,events,hover,mouseout,mouseleave,Jquery,Events,Hover,Mouseout,Mouseleave,我有以下问题。我正在编写一个简单的jQuery工具提示,现在我正在处理一些对我来说很奇怪的事情。每次我将鼠标移到元素上时,鼠标移过和鼠标移出的事件都会同时触发-因此工具提示消失(但如果我一直将鼠标移过,它会在一秒钟内多次闪烁)。这是我的密码 var hint = $('<div id="hint-wrap"><div id="hintbox-top"><div id="hintbox-bottom"><div id="hintbox-topleft"

我有以下问题。我正在编写一个简单的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();
  });
var-hint=$('');//我知道很有趣:-D
hint.hide();
$('body')。追加(提示);//我附加它
$('.hashint').hover(函数(e){
//将位置设置为光标的位置
css('left',e.pageX);
css('top',e.pageY-60);
//动画附加
css('opacity',0.2);
hint.show();
动画({'opacity':1},100);
//设置文本
$(“#hint”,hint).html($('#'+$(this.attr('id')+'-hint').html());
},
函数(){//出现了问题
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>
Lorem Ipsum只是打印和键入.Lorem的虚拟文本。
用户名*

请问,有人知道为什么鼠标移出事件仍然触发并隐藏我的盒子吗


非常感谢,Ondrej

首先,为什么不在HTML文档中添加HTML作为提示?
在CSS中,您只需设置display:none?
然后在显示提示时,您可以使用
hint.show
hint.fadeIn

我只会使用和

例如:

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

$.('#usernamelabel-hint').mouseleave(function() {
  // Hide or fade out hinttext
});

可能是你的工具提示div覆盖了你的触发div吗?在这种情况下,出现的工具提示div将触发trigger-div的鼠标删除。。至少那是几天前发生在我身上的事。我用一个不可见的trigger div覆盖了所有内容,解决了这个问题-不太漂亮,但对我来说很有用。

好的,我把提示框放进了文档中。我没有使用fadeIn,因为我想从不透明度0.2:o开始,这并不重要。mouseenter和mouseleave事件让我遇到了与hover相同的问题。(在我的exmp中,必须使用$('.hasint').mouseleave)哦,伙计,你说得对!这就是问题所在。好的,thx是解决方案,但我想我的案例最好是以某种方式创建一些条件,比如(if!ishover(el1)或!ishover(el2))el2.hide()