onmouseover事件行为不端

onmouseover event misbehaving

本文关键字：行为不端 事件 onmouseover      更新时间：2023-09-26

我试图制作某种窗帘式效果，并将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>

我认为答案是你让孩子的位置是绝对的。这样，它们就不再是父div的"一部分"。在您的情况下，外部div没有高度，因为子div在页面上是绝对的。

mouseover属性向下委派。所以父母和孩子都会倾听。阅读这篇文章，了解事件侦听器如何工作的更多信息https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

之所以发生这种情况，是因为与图像大小相比，外部div高度较小。所以当您将鼠标移到外部div之外时，会调用back事件。只需给外部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>

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

之所以会发生这种情况，是因为子div在父div的范围内。

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

相关文章：