Javascript 事件不当行为

我试图制作某种窗帘式效果，并将

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:

#制作动画{
宽度：400px；
保证金：自动；
位置：相对位置；
}
img{
宽度：100%；
}
#左{
位置：绝对位置；
排名：0；
右：50%；
填充：0；
保证金：0；
宽度：50%；
变换原点：0；
}
#对{
位置：绝对位置；
排名：0；
右：0%；
填充：0；
保证金：0；
宽度：50%；
变换原点：100%0；
}

HTML:

---

我想答案是你把孩子们的地位绝对化了。这样，它们就不再是父div的“一部分”。在您的例子中，外部div没有高度，因为子div在页面上是绝对的

---

mouseover属性将委托关闭。因此，家长和所有孩子都会倾听。请阅读这篇文章，了解事件侦听器如何工作的更多信息。之所以发生这种情况，是因为与图像大小相比，您的外部div高度很小。所以，当您将鼠标移到外部div back之外时，将调用该事件。只需给外部分区一些最小高度。这是工作代码

var left=document.getElementById（“left”）；
var right=document.getElementById（“right”）；
功能窗帘（）{
left.style.transform=“旋转（30度）”；
right.style.transform=“旋转（-30度）”；
}
函数back（）{
left.style.transform=“旋转（0度）”；
right.style.transform=“旋转（0度）”；
}

#制作动画{
宽度：250px；
保证金：自动；
位置：相对位置；
身高：225px；
边框：1px实心；
}
img{
宽度：100%；
}
#左{
位置：绝对位置；
排名：0；
右：50%；
填充：0；
保证金：0；
宽度：50%；
变换原点：0；
}
#对{
位置：绝对位置；
排名：0；
右：0%；
填充：0；
保证金：0；
宽度：50%；
变换原点：100%0；
}

---

根据我的理解，我认为您希望，如果您将鼠标移到子div上，则不会对子div产生任何影响，只有当您将鼠标移到父div上时，才会发生这种情况

发生这种情况是因为子div在父div的范围内

---

因此，您必须管理这些div。调整父div的高度，它将正常工作。

本例中的所有div都属于包含事件的父div。。

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