Javascript鼠標懸停事件代理Squirrely

我試圖顯示一個div容器與子元素，並只顯示容器的頂部，直到鼠標移過它，然後顯示與內容的子元素的整個容器。這種類型的工作就像我想要的那樣，但問題是，如果將鼠標移動到任何子元素上，整個主容器都會滑回，然後再次滑落。我正在嘗試使整個容器在MouseOver上滑落，並在MouseOut停止滑動時保持滑動狀態。Javascript鼠標懸停事件代理Squirrely

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

來源

2013-04-16 The Duke Of Marshall שלם

如果你設置了jsfiddle，你很可能會得到更多的幫助。 –

我想你不喜歡單獨寫jQuery :) –

@bmorehokie對，對不起。我在發帖時一直忘記這麼做。 –

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

來源

2013-04-16 15:43:23

完美！謝謝！我想我的思維方式確實需要擺脫舊的學校方法，比如「onmouseover」。 –

它看起來像你正在使用JQuery，所以不要使用onmouseover事件。

使用JQuery的懸停方法代替：http://api.jquery.com/hover/

它允許您提供當鼠標進入一個功能和對象，當鼠標離開的對象。

雖然你在它，我會用JQuerys .click（）方法替換onclick事件。 http://api.jquery.com/click/

來源

2013-04-16 15:42:06 cowls

謝謝。那做了這個工作。 –

你想mouseenter和mouseleave。他們由jQuery在hover合併。

在JavaScript中，您可以檢測何時onmouseout是onmouseleave或者您是否只是將鼠標懸停在子元素上。檢查event.relatedTarget是否是子元素。

來源

2013-04-16 15:47:41 Halcyon

我也嘗試過，但似乎這是微軟獨佔的事情。 jQuery懸停在最後做了訣竅。 –

據我所知，它適用於所有瀏覽器。這裏是Firefox規範：https：//developer.mozilla.org/en-US/docs/DOM/event.relatedTarget – Halcyon

Javascript鼠標懸停事件代理Squirrely

回答

相關問題