Question

我有一个父div和一个孩子div。现在我要执行的功能是，当父div的鼠标x和y的坐标大于413和10时，子div应该旋转。但它不起作用。我想用JavaScript做。所以请告诉我这里的错误。

顺便说一下，我在控制台中没有收到任何错误。

window.onload = function() {
  var test = document.getElementsByClassName("parent-div");
  for (var i = 0; i < test.length; i++) {
    test[i].addEventListener("mousemove", function(event) {
      var x = event.clientX;
      var y = event.clientY;
      console.log(x + " " + y);
      if (x > 413 && y > 10) {
        for (var i = 0; i < test.length; i++) {
          test[i].mousemove = function(idx) {
            this.classList.toggle("rotated");
            if (idx < test.length - 1) test[idx + 1].classList.toogle("rotated");
          }.bind(test[i], i);
        }
      }
    }, false);
  }
};

body {
  background-color: #aaa;
}

.parent-div {
  width: 500px;
  height: 500px;
  background-color: yellow;
  display: flex;
  justify-content: space-around;
  perspective: 500px;
}

.child-div {
  width: 250px;
  height: 250px;
  margin-top: 100px;
  background-color: blue;
}

div.rotated>div.child-div {
  transform: rotateY(45deg);
}

<body>
  <div class="parent-div">
    <div class="child-div"></div>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

div转换不适用于使用javascript进行鼠标悬停

0 个答案: