0

我试图显示一个带有子元素的 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>
4

3 回答 3

1

看起来您无论如何都在使用 JQuery，所以不要使用 onmouseover 事件。

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

它允许您在鼠标进入对象和鼠标离开对象时提供函数。

当您使用它时，我会用 JQuerys .click() 方法替换 onclick 事件。http://api.jquery.com/click/

于 2013-04-16T15:42:06.933 回答
1

jQuery 有一个功能：悬停。

它还可以让您避免内联事件处理程序：

  <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>

示范

于 2013-04-16T15:43:23.390 回答
0

你想要mouseenter和mouseleave。它们由 jQuery 在hover.

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

于 2013-04-16T15:47:41.177 回答