Question

我有一个包含其他div的div，我希望每个div在.mouseenter()上翻转一次，然后在.mouseleave()上回到原来的loacation，因此我使用了.toggleClass()方法将一个类附加到一个元素，然后在该项目不再悬停时将其删除。

这样可行，但是如果我传递了所有元素，那么.hover()的事件处理似乎是多次执行的，为什么会这样？

$(document).ready(function() {
  $(".square").hover(function() {
    $(this).toggleClass("flipper");
  });
});

.square {
  width: 100px;
  height: 100px;
  color: black;
  background: white;
  float: left;
  margin: 10px;
}

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  transform: rotateX(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="color:orange; background:blue; width:1000px; height:120px;">
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
</div>

注意： 要重现此问题，请尝试将鼠标悬停在多个项目上而不是等待动画完成，继续以不同的速度从右向左滚动鼠标，反之亦然。这似乎是一些div的多次翻转。

我也可以在各种浏览器上重现这一点。

Answer 1

首先，你不需要jquery这样的动画。你只能用css来做。我已经实施了你的CSS。看看下面。

        .square {
      width: 100px;
      height: 100px;
      color: black;
      background: white;
      float: left;
      margin: 10px;
    }

    .square:hover {
      transition: 0.6s;
      transform-style: preserve-3d;
      transform: rotateX(180deg);
    }

只需将此css粘贴到您的文件中，然后删除它将完美运行的javaScript

Answer 2

原因：

每当你将鼠标悬停在div上时，div开始翻转。虽然翻转它的高度开始缩小并且你的光标即使在同一位置，但是当div的高度完全缩小到小而现在光标超出其区域时，会发生mouseleave事件。

要重现此错误，请尝试减少转换和悬停

<强>解决方案

创建与方形div匹配的外部div并使其隐藏，以使其尺寸不会改变。现在，当你只悬停方形div维度更改而不是外部div时。我们在outerdiv上编写鼠标事件的方式。

$(document).ready(function() {  
  $(".outer").mouseenter(function() {
    $(this).find(".square").toggleClass("flipper");
  });
  $(".outer").mouseleave(function() {
    $(this).find(".square").toggleClass("flipper");
  });
});

.square{
  width: 100px;
  height: 100px;
  color: black;
  background: white;

}

.outer{
 background: grey;
 width: 100px;
 height: 100px;
 float: left;
 margin: 10px;
 
}

.flipper {
  transition: 2s;
  transform-style: preserve-3d;
  transform: rotateX(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="color:orange; background:blue; width:1000px; height:120px;">
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
  <div class="outer"><div class="square"> </div></div>
</div>

Answer 3

尝试以下代码..它的工作正常。

      .square {
      min-width: 100px;
      max-width: 100px;
      min-height: 100px;
      max-height: 100px;
      background: #fff;
      float: left;
      margin: 10px;
    }

    .flipper {
      transition: .5s;
      transform-style: preserve-3d;
      transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg);
    }


  <div style="color:orange; background:blue; width:1000px; height:120px;">
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
  </div>

  <script type="text/javascript">
$(".square").mouseover(function() {
  if( $(this).hasClass("flipper") )
  {
      $(this).removeClass("flipper");
  }
  else {
    $(this).addClass("flipper");
  }
});
  </script>

Answer 4

因为您已将悬停事件处理程序应用于方形类。所以它将调用所有div元素的处理程序，它在悬停时具有方形类。因此，它被多次调用。希望这会对你有所帮助。

为什么我的$（）。悬停会被多次触发？

4 个答案: