jQuery pairar ainda provocando fora

Question

Eu tenho o seguinte problema. Eu estou trabalhando em uma dica de ferramenta simples jQuery e agora estou lidando com algo estranho para mim. Toda vez que eu mouseover o elemento, eventos para mouse e mouse para fora são acionados tanto - de modo que os desaparece dica (mas se eu continuar mão sobre, ele faz muito de piscadas em um segundo). Não é o meu código.

  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();
  });

E o 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>

Por favor, alguém sabe por que o mouse para fora evento ainda está provocando e escondendo minha caixa?

Muito obrigado, Ondrej

Answer 1

poderia ser, que a sua dica-div está sobrepondo seu disparador-div? Nesse caso, o aparecimento tooltip-div desencadeia a mouseleave do gatilho-div .. Pelo menos é o que aconteceu comigo algumas divs atrás. Eu resolvi esse problema sobrepondo tudo com um invisível trigger-div - não tão bonito, mas funcionou para mim ..

Answer 2

Em primeiro lugar, por que você não apenas colocar o código HTML para a dica no documento HTML?
E no CSS você acabou de definir display:? Nenhum
Então, quando mostrando a dica, você pode apenas usar hint.show ou hint.fadeIn.

Gostaria apenas de usar $ .mouseenter e $. mouseleave .

Exemplo:

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

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