onmouseover事件行爲異常

Question

我試圖使某種幕式效果，並應用onmouseover父母div ID。我無法理解，爲什麼當我將鼠標移動到子節點div以外的效果發生時，父節點div除外。

var left = document.getElementById("left"); 
var right = document.getElementById("right"); 

function curtain() { 
    left.style.transform = "rotate(30deg)"; 
    right.style.transform = "rotate(-30deg)"; 
} 

function back() { 
    left.style.transform = "rotate(0deg)"; 
    right.style.transform = "rotate(0deg)"; 
} 

CSS：

#animate { 
    width: 400px; 
    margin: auto; 
    position: relative; 
} 
img { 
    width: 100%; 
} 
#left { 
    position: absolute; 
    top: 0; 
    right: 50%; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    transform-origin: 0 0; 
} 
#right { 
    position: absolute; 
    top: 0; 
    right: 0%; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    transform-origin: 100% 0; 
} 

HTML：

<div id="animate" onmouseover="curtain()" onmouseout="back()"> 
    <div id="left"> 
    <img src="http://www.uwphotographyguide.com/images/Articles/image-overlay-3107.jpg"> 
    </div> 
    <div id="right"> 
    <img src="http://s3.freefoto.com/images/15/78/15_78_19_web.jpg"> 
    </div> 
</div> 

Answer 1

我認爲答案是，你成爲絕對的孩子的位置。因此，他們不再是「母公司」的「一部分」。在你的情況下，外部div沒有高度，因爲孩子們絕對放在頁面上。

鼠標懸停屬性代表下來。所以父母會收聽，而所有這些都是孩子。閱讀關於此事件的更多信息，瞭解事件偵聽器的工作原理https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

發生這種情況是因爲您的外部div高度與圖片大小相比較小。所以當你將鼠標移到外部div後面的事件被調用時。只是給外部div一些最小高度。這裏是工作的代碼

var left = document.getElementById("left"); 
 
var right = document.getElementById("right"); 
 

 
function curtain() { 
 
    left.style.transform = "rotate(30deg)"; 
 
    right.style.transform = "rotate(-30deg)"; 
 
} 
 

 
function back() { 
 
    left.style.transform = "rotate(0deg)"; 
 
    right.style.transform = "rotate(0deg)"; 
 
}

#animate { 
 
    width: 250px; 
 
    margin: auto; 
 
    position: relative; 
 
    height: 225px; 
 
    border: 1px solid; 
 
} 
 
img { 
 
    width: 100%; 
 
} 
 
#left { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 50%; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 50%; 
 
    transform-origin: 0 0; 
 
} 
 
#right { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0%; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 50%; 
 
    transform-origin: 100% 0; 
 
}

<div id="animate" onmouseover="curtain()" onmouseout="back()"> 
 
    <div id="left"> 
 
    <img src="http://www.uwphotographyguide.com/images/Articles/image-overlay-3107.jpg"> 
 
    </div> 
 
    <div id="right"> 
 
    <img src="http://s3.freefoto.com/images/15/78/15_78_19_web.jpg"> 
 
    </div> 
 
</div>

Answer 3

按我的理解，我想你想，如果你把鼠標移到對兒童的div沒有影響將會對孩子的div，它應在發生，只有當你的鼠標在父母的div上。

發生這種情況是因爲子div在父div的範圍內。

所以你必須管理這些div。調整父div的高度，它會正常工作。