위로 마우스를 가져 가면 요소 변경 위로 마우스를 가져갑니다.

Question

제목의 구두점을 사용하지 마십시오. 그러나 요약하기가 어려웠습니다.

이 내가 #test을 가리킬 때,이 중단, 다시 보이지 않는 존재에 #example1 및 #exmaple2 수익을 유혹 할 때 #example1 및 #exmaple2 다음 보이고하게됩니다

<div id="test">Test</div> 
<div id="example1" style="display:none;">Test</div> 
<div id="example2" style="display:none;">Test</div> 

수행 할 것입니다.

분명히 간단한 코드.

$('#test').hover(
    function() { 
    $('#example1,#example2').show(); 
    }, 
    function() { 
    $('#example1,#example2').hide(); 
    } 
); 

여기에 딜레마가 있습니다. 위에 마우스를 올려 놓았을 때 #example1 및 #exmaple2이 계속 표시되어야합니다. #example1 또는 #example2 위로 마우스를 가져 가면 왼쪽 위의 코드에서 지시하는대로 다시 돌아갑니다. 어떻게하면 가능합니까?

나는 때문에 내 실제 코드에서이

<div id="wrapper"> 
<div id="test">Test</div> 
<div id="example1" style="display:none;">Test</div> 
<div id="example2" style="display:none;">Test</div> 
</div> 

같은 요소를 함께 포장하고이 문제를 해결할 것

$('#wrapper').hover(
    function() { 
    $('#example1,#example2').show(); 
    }, 
    function() { 
    $('#example1,#example2').hide(); 
    } 
); 

에 코드를 변경,하지만 난 그렇게 할 수 아니에요 것을 이해 #test은 이미 래퍼 (wrapper) 아래에 있습니다.이 래퍼는 #example1과 #example2을 포함하면 파괴 될 수있는 매우 특정한 디자인의 래퍼입니다.

은 요약하면 위의, 내 질문은 : #test가 가리킬와 #example1 및 #example2이 표시 될 때, 어떻게 #example1 및 #example2 위에 마우스를 할 #test을 떠나는 경우에도 #example1 가시 #example2을 유지할 수 있습니다?

Answer 1

이 작업을 수행하지 않습니까?

$('#test').hover(
    function() { 
    $('#example1,#example2').show(); 
    } 
    , function() { 
    $('#example1,#example2').hide(); 
    } 
); 

그런 다음 높이 문제를 해결하기 위해 HTML을 변경하십시오.

<div id="test"> 
Test 
<div id="example1" style="display:none;z-index:256;">Test</div> 
<div id="example2" style="display:none;z-index:256;">Test</div> 
</div> 

Answer 2

mousenter와 mouseleave를 사용하는 것이 어떻습니까 ???

편집 ... 당신은 내가 위에서 언급 한 바와 같이, 나는 이미 내 코드에서 다른 래퍼에`#의 test`이 요소

$('#test,#example1,#example2').hover(

function() { 
    $('#example1,#example2').show(); 
}, function() { 
    $('#example1,#example2').hide(); 
});