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的“部分”。在您的情况下，外部div没有高度，因为子项在页面上是绝对的。

mouseover属性委托下来。所以父母听他们所有的孩子。阅读本文，了解有关事件监听器如何工作的更多信息https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

这是因为你的外部div高度与图像尺寸相比较小。所以当你将鼠标移到外部div之外时，会调用事件。只给外部div一些最小高度。这是工作代码

＆＃13;

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)";
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

根据我的理解，我认为如果你将鼠标移到子div上就不会对子div产生任何影响，只有当你将鼠标悬停在父div上时才会发生这种情况。

这是因为子div在父div的范围内。

所以你必须管理这些div。调整父div的高度，它将正常工作。

onmouseover事件行为不端

3 个答案: