jQuery - 停止用相關元素觸發父級點擊的子級懸停點擊

Question

這不是一個重複的問題。我已經看了一下週圍的stackoverflow和以下問題都沒有爲我工作。

jQuery stop child elements animate on hover of parent
How to have click event ONLY fire on parent DIV, not children?

我有一個父元素.cover和內部調用.details-wrapper

當我將鼠標懸停在父的子元素，父懸停正在觸發一個子元素。這是我想要的（對不起，關於編輯）;

目前我曾嘗試（和失敗的）使用return false;和stopPropagation

的形象position: relative和top: 160px所以它出來原來.cover包裝

的這真的很奇怪，因爲我將鼠標懸停在元素上的方式決定了jquery如何工作。這是一個GIF顯示。

https://gyazo.com/7153f3b8d3a57d0cfbb6b8d7d56caf0a

的我使用jQuery是：

$(".cover").not('.details-wrapper').hover(function(e) { 
    if (e.target === this) { 
     $(".cover").css("background","url(url1), url('"+cover._url+"')"); 
    } 
}, function() { 
    $(".cover").css("background","url('"+cover._url+"')"); 
}); 

我不確定我怎麼能解決這個問題，所以當我將鼠標懸停在子元素，它停止在懸停父從觸發。

只是爲了進一步澄清，這並不工作之一：

$(".cover").hover(function(e) { 
    if (e.target === this) { 
     $(".cover").css("background","url(url1), url('"+cover._url+"')"); 
    } 
}, function() { 
    $(".cover").css("background","url('"+cover._url+"')"); 
}); 

$(".cover .details-wrapper").hover(function(e) { 
    e.stopPropagation(); 
}); 

Answer 1

不要依賴.hover()功能，這對於.mouseenter()和.mouseleave()事件的簡寫。您需要.mouseover()和.mouseout()事件，並輸入時，它會觸發適當/離開子節點：

$(function() { 
    $('.cover').on('mouseover', function(e) { 
     if (e.target === this) { 
     $('.cover').css('background','url(url1), url(''+cover._url+'')'); 
     } 
    }) 
    .on('mouseout', function() { 
     $('.cover').css('background','url(''+cover._url+'')'); 
    }); 
}); 

簡單的解釋是這樣的：當您使用.hover()（因此mouseenter和mouseleave正在聆聽），他們在您輸入或離開子元素時不會觸發。這會導致該事件顯示爲「傳播」 ，因爲在後臺中，輸入孩子時從未調用過mouseleave事件。但是，mouseout事件將被調用，導致期望的行爲。

下面是證明了概念一個例子（使用紅色背景，以指示mouseover事件）：

$(function() { 
 
    $('.cover').on('mouseover', function(e) { 
 
     if (e.target === this) { 
 
     $('.cover').css('background', 'red'); 
 
     } 
 
    }) 
 
    .on('mouseout', function() { 
 
     $('.cover').css('background', 'transparent'); 
 
    }); 
 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.cover { 
 
    padding: 2rem; 
 
    text-align: center; 
 
    position: relative; 
 
    height: 10rem; 
 
} 
 
.cover .details-wrapper { 
 
    background-color: #eee; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    padding: 2rem; 
 
    transform: translate(-50%,-50%); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cover"> 
 
    Cover 
 
    <div class="details-wrapper"> 
 
    Details wrapper 
 
    </div> 
 
</div>

有，討論這些事件之間的差異上SO一個線程：Jquery mouseenter() vs mouseover()