Javascript 鼠标悬停事件 Acting 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