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的高度，它会正常工作。