當鼠標懸停在子元素上方時，父元素認爲我在做mouseleave（）

這顯然不是這樣。當鼠標懸停在子元素上方時，父元素認爲我在做mouseleave（）

我的JS：

$(".job_charge.item-block").live({ 
    mouseenter: function(){ 
    $(this).find('.edit-and-delete').stop(true,true).fadeIn(); 
    }, 
    mouseleave: function(){ 
    $(this).find('.edit-and-delete').stop(true, true).fadeOut(); 
    } 
});

我的HTML：

<div id="job_charge_2244" class="item-block job_charge"> 
      <div class="edit-and-delete right"> 
      </div> 
</div>

的CSS：

.item-block.job_charge 
    border-bottom: 1px dotted #ccc 
    display: inline-block 
    padding-bottom: 15px 
    width: 650px 

    .edit-and-delete 
    position: relative 
    display: none 
    top: 25px 
    right: 5px 
    float: right 
    a 
     margin-right: 8px

我已經走了香蕉。當我將鼠標懸停在內部div的鏈接上時，立即觸發鼠標離開功能並隱藏。這個div當然是在position: relative，但我也把它放在block，它仍然有同樣的問題。

父div在inline-block。

來源

2012-03-27 Trip

讓我們看看'CSS'是否爲父元素和子元素。是否有可能將子元素設置爲「浮動」，並且您的父項實際上比您預期的要小？ – 2012-03-27 19:02:29

這是因爲就DOM而言，您將離開父元素，然後在將鼠標移到子元素上時再次重新輸入它。看看[這裏]（http://www.quirksmode.org/js/events_mouse.html#mouseover）有關這方面的一些想法。 – Blazemonger 2012-03-27 19:03:30

子元素現在是'float：right' .. – Trip 2012-03-27 19:04:31

這是可能的子元素被設置爲float和你父母其實比你所期望的要小。嘗試刪除float或將overflow: auto放在父級上...

來源

2012-03-27 19:30:43

在我的情況下，我必須將子元素的z-index設置爲1，因爲它是絕對定位的。不知道爲什麼，因爲這是事實。 – 2013-02-09 23:56:09

感謝溢出：在包含浮動元素的父級上自動運行，我並不那麼幸福地沒有意識到這一點。 – dajoto 2013-07-29 11:13:47

對我來說這是'溢出：隱藏' – Snickbrack 2014-12-12 13:18:13

試試這個代替..它基本上是一樣的，但是使用了.hover這是mouseenter和mouseleave的組合功能..並且它沒有在進入孩子時離開父母的錯誤。

$(".job_charge.item-block").hover(function(){ 
    $(this).children(".edit-and-delete").fadeIn(); 
}, function(){ 
    $(this).children(".edit-and-delete").fadeOut(); 
});

http://jsfiddle.net/YWRRZ/4/ < - 我的小提琴鏈接，您可以測試它

來源

2012-03-27 19:18:27

這段代碼只會做與問題中的代碼相同。該文檔說''hover'方法是'$（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）'的縮寫。 – Guffa 2012-03-27 19:25:42

當然，但是習慣的力量迫使我顯示.hover方式 – 2012-03-27 19:51:10

mouseenter和mouseleave事件專門用於正確處理這種情況。當您輸入子元素時，如果子元素實際位於父元素內部，則不會爲父元素觸發事件mouseleave。

當我嘗試你的代碼，它不會，當我徘徊子元素觸發mouseleave事件：

http://jsfiddle.net/baCsd/

我認爲你必須在你的代碼的東西，實際上會將子元素外部父元素，這就是爲什麼mouseleave事件被觸發。

例如，如果父元素中沒有內容，它只是填充高度的填充，所以它只有15px高，而position: relative; top: 25px;可以將子元素放置在父元素底部的下方。

來源

2012-03-27 19:32:55 Guffa

這對我有幫助。謝謝！ – Brendan 2014-03-05 23:03:24

好東西我沒有停下來接受答案。 – Andrew 2014-08-22 22:06:50

他可能會使用mouseout。 – eomeroff 2015-06-22 01:07:58

當鼠標懸停在子元素上方時，父元素認爲我在做mouseleave（）

回答

相關問題