jQuery hover все еще срабатывает

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

это может быть, что ваша подсказка-ДИВ будет накладывая свой триггер-DIV? В этом случае появляющийся tooltip-div запускает мышь триггера-div. По крайней мере, это то, что случилось со мной в некоторых divs назад. Я решил эту проблему, наложив все на невидимый триггер-div - не так красиво, но работал на меня.

Answer 2

Во-первых, почему вы не просто поставить HTML для подсказки в HTML-документе?
И в CSS вы только что установили отображение: 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 
});