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

我想答案是你让 child 的位置变得绝对了。这样一来，它们就不再是父 div 的“一部分”了。在你的情况下，外部 div 没有高度，因为 children 在页面上是绝对的。

mouseover 属性向下委托(delegate)。所以 parent 和所有 child 都在听。阅读此内容以了解事件监听器如何工作的更多信息 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener