jQuery 호버가 여전히 트리거 됨

Question

다음과 같은 문제가 있습니다. 나는 간단한 jQuery 툴팁을 작성 중이며 지금은 나에게 이상한 것을 다루고있다. 마우스 오버 시마다 마우스 오버 및 마우스 아웃 이벤트가 발생하므로 툴팁이 사라집니다 (그러나 손을 잡고 계시면 이 1 초 안에 많이 깜박임). 내 코드가있어.

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> 

가, 누군가가 마우스 아웃 이벤트가 여전히 트리거링 및 내 상자를 숨기고 있다는 이유를 알고 않습니다하세요?

고마워, 드레이

Answer 1

이 될 수있다, 당신의 툴팁-사업부가 트리거-사업부를 오버레이된다? 이 경우 나타나는 tooltip-div는 trigger-div의 mouseleave를 트리거합니다. 적어도 일부 divs 전에 나에게 무슨 일이 일어 났는지. 모든 것을 보이지 않는 방아쇠 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 
});