jQuery Hover-Triggerung noch aus

Question

ich folgendes Problem. Ich arbeite an einem einfachen jQuery Tooltip und jetzt mit etwas seltsam für mich ich zu tun habe. Jedes Mal, wenn ich das Element Mouseover, Veranstaltungen für die Maus über und Maus-out sind beide ausgelöst - so die Tooltip verschwindet (aber wenn ich die Hand über halten, tut es viel von blinkt in einer Sekunde). Es ist mein Code.

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

Und die 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>

Bitte, hat jemand wissen, warum die Maus aus Ereignisse noch auslöst und meine Box versteckt?

Vielen Dank, Ondrej

Answer 1

könnte es sein, dass Ihre Tooltip-div Ihr Trigger-div wird überlagert? In diesem Fall löst das Erscheinen Tooltip-div das Mouseleave des Trigger div .. zumindest das ist, was mir passiert ist vor einigen divs. Ich löste das Problem, indem sie alles mit einem unsichtbaren Trigger-div überlagert - nicht so schön, aber für mich gearbeitet ..

Answer 2

Erstens, warum Sie nicht nur den HTML-Code setzen für den Hinweis in dem HTML-Dokument?
Und in der CSS gerade eingestellten Display: keine
Dann, wenn der Hinweis angezeigt, können Sie nur hint.show oder hint.fadeIn verwenden.

Ich würde verwenden Sie einfach $ .mouseenter und $. mouseleave .

Beispiel:

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

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