Javascript Mouseover 이벤트 Squirrely

Question

자식 요소가있는 div 컨테이너를 표시하려고하고 마우스가 위로 움직일 때까지 컨테이너의 위쪽 부분을 표시 한 다음 내용이있는 자식 요소가있는 전체 컨테이너를 표시하려고합니다. 이 일은 내가 원하는 것처럼 작동하지만 문제는 마우스를 하위 요소 위로 이동하면 전체 주 컨테이너가 위로 슬라이드 한 다음 다시 아래로 슬라이드된다는 것입니다. 나는 전체 컨테이너가 MouseOver로 미끄러 져 내려가도록 마우스를 올려 놓으려고 할 때 MouseOut이 위로 미끄러 져 움직일 때까지 머물러 있습니다.

<div onmouseover="$('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });" 
onmouseout="$('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });"> 
Title 
<BR> 
mm/dd/yyyy hh:mm - hh:mm 
<div id="id_content" style="visibility: hidden; display: none;"> 
    Description 
    <BR> 
    Content 
</div> 
<span class="commands"> <!-- Goes in the top right hand corner of the main container --> 
    <span class="delete" onclick="delete_entry('record_id')">X</span> 
</span> 
</div> 

Answer 1

jQuery에는 다음과 같은 기능이 있습니다. hover.

그것은 또한 당신이 이벤트 핸들러를 인라인 방지 할 수 있도록 다음과 같습니다

<script> 
    $('#a').hover(function(){ 
     $('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); }); 
    }, function(){ 
     $('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); }); 
    }); 
    </script> 

Demonstration

Answer 2

어쨌든 JQuery를 사용하는 것처럼 보이므로 onmouseover 이벤트를 사용하지 마십시오.

대신 JQuery와 호버 방법을 사용 : http://api.jquery.com/hover/

그것은 당신이 마우스 입력 기능과 객체 때 마우스가 객체 잎을 제공 할 수 있습니다.

나는 당신이 Jclerys .click() 메서드로 onclick 이벤트를 대체 할 것입니다. http://api.jquery.com/click/

Answer 3

당신은 mouseenter 및 mouseleave를 원한다. 그들은 hover에서 jQuery로 결합됩니다.

onmouseout이 onmouseleave 인 경우 또는 하위 요소 위에 마우스를 올렸을 때를 감지 할 수 있습니다. event.relatedTarget이 하위 요소인지 확인하십시오.