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，所以不要使用onmouseover事件。

使用JQuery悬停方法：http://api.jquery.com/hover/

它允许您在鼠标进入和对象以及鼠标离开对象时提供功能。

当你在它的时候我会用JQuerys .click（）方法替换onclick事件。 http://api.jquery.com/click/

Answer 2

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 3

您需要mouseenter和mouseleave。它们由hover中的jQuery组合而成。

在JavaScript中，您可以检测onmouseout何时是onmouseleave，或者您是否只是将鼠标移到子元素上。检查event.relatedTarget是否为子元素。

Javascript Mouseover事件代理Squirrely

3 个答案: