jQuery를 사용하여 링크의 마우스 오버시 div fadein 만들기

Question

내가하려는 것은 간단해야하지만 HTML을 변경할 수없는 방식으로 복잡합니다. 기본적으로 귀하의 계정의 mouseover가 발생하면 header에 stackoverflow가 갖는 것이 필요합니다. 마우스가 떠날 때 작은 메뉴가 다시 페이드 인 및 페이드 아웃됩니다.

HTML

<div id="top-links"> 
    <a id="my_link">Link</a> 
    <div id="my_mouseover"> 
     content 
    </div> 
    </div> 

자바 스크립트

$jQ('#my_link').mouseenter(function(){ 
    $jQ('#my_mouseover').fadeIn(200); 
    $jQ('#my_mouseover').mouseleave(function(){ 
     $jQ('#my_mouseover').fadeOut(); 
    }); 
    $jQ('#my_link').mouseleave(function(){ 
     $jQ('#customer_mouseover').fadeOut(); 
    }); 
}); 

내 문제는 내가 <a>와 <div> 사이에 내 마우스를 이동할 때 DIV 다시 및 페이드 아웃이다. 말할 수있는 방법이 있습니까 :

$jQ('#my_mouseover').mouseleave(function(){ 
     //there's no such thing as mouseIsOver 
    if(!$jQ('#my_link').mouseIsOver()){ 
    $jQ('#customer_mouseover').fadeOut(); 
    }  
}); 

이 작업을 수행하는 방법을 아는 사람이 있습니까? 나는 내가 원하는 것을 Google에서 찾을 수 없다.

Answer 1

당신은 top-links DIV에 mouseenter 및 mouseleave을 넣을 수 :

$('#top-links').mouseenter(function(){ 
    $('#my_mouseover').fadeIn(200); 
}); 
$('#top-links').mouseleave(function(){ 
    $('#my_mouseover').fadeOut(200); 
}); 

http://jsfiddle.net/KJE7x/

Answer 2

가 mouseenter를 추가하고 부모 컨테이너에 이벤트를 떠나 ..이 마우스를 두었을 때와하는 MouseLeave 이벤트를 얻을 것이다 그 그림자 요소 (<a> 및 <div>)도

$('#top-links').hover(function(){ 
    $('#my_mouseover').fadeIn(200); 
},function(){ 
    $('#my_mouseover').fadeOut(200); 
}); 

참고 : 대신 각 이벤트

Answer 3

$('#top-links').on({ 
    mouseenter : function() { 
     $('#my_mouseover').fadeIn(200); 
    }, 
    mouseleave : function(){ 
     $('#my_mouseover').fadeOut(200); 
    } 
}); 

Answer 4

나는 문제 피트 나와 함께 공유 방식으로 추가 링크를 추가했다 두 sepearte 기능을 만드는 .hover()을 사용할 수 있습니다, 결국 이것은 내가 무슨 짓을 :

$('#top-links').mouseenter(function(){ 
$('#my_link').mouseenter(function(){ 
    //fade everything else out 
    $('#my_mouseover2').fadeOut(); 
    $('#my_mouseover').fadeIn(200); 
}); 
$('#my_link2').mouseenter(function(){ 
    $('#my_mouseover').fadeOut(); 
    $('#my_mouseover2').fadeIn(200); 
}); 
}); 
$('#top-links').mouseleave(function(){ 

$('#my_mouseover').fadeOut(200); 
$('#my_mouseover2').fadeOut(200); 
});