悬停在动画div上不起作用答案

【问题标题】：Hover not working on animated div悬停在动画div上不起作用
【发布时间】：2014-09-07 09:14:20
【问题描述】：

我用 Tweenlite 动画框制作了一个 codepen。该框在css中有一个 :hover 。如果您将鼠标放在动画框的路径上，使其“击中”鼠标，您会看到悬停效果不会发生。只有当鼠标在上面移动时才会发生。

我该如何解决这个问题？

.box {
  width:50px;
  height:50px;
  position:relative;
  margin-bottom:2px;
}

.red {
  background-color:red;
}

.red:hover{
    background-color: white;
}

【问题讨论】：

它在 Firefox 30.0 版上对我有用，但在 Chrome 35.0 上却不行。
对于 Chrome 35 中的我来说，它仅在第一次触发 :hover 事件后才有效。

标签： javascript css

【解决方案1】：

这是 Jcubed 回答的延续：

本质上它是在计算鼠标的位置并根据物体的位置检查它，然后查看两者之间的距离是否小于每 100 毫秒 25 像素。

如果对象小于 25px（对象宽度的一半），则它在其中，并将添加悬停类。如果它更大，它将删除悬停类。

CodePen

(function() {


    $("#restart").on("click", function() {
      tl.restart();
    })
    var mX, mY, distance, mousePosition,
        $distance = $('#distance span'),
        $element  = $('#redBox');
     // Movement
     var tl = new TimelineLite()
     tl.to($element, 15, {x:550});

    setInterval(function() {

       function calculateDistance(elem, mouseX, mouseY) {
            return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
       }

       $(document).mousemove(function(e) {  
           mX = e.pageX;
           mY = e.pageY;
           mousePosition = (mX, mY);
           $distance.text(distance);  
       });
       distance = calculateDistance($element, mX, mY);
       if(distance < 25){
          console.log("Mouse Has Entered");
          //adding hovered class
          $($element).addClass('hovered');
       }

       else{
          // removing hovered class
          $($element).removeClass('hovered');
       }
    // Setting Timeout
    }, 100);
})();

Here's some additional information from Chris Coyier

【讨论】：

谢谢你 MathiasaurusRex - 会很好的。

【解决方案2】：

这可能是一个浏览器错误。似乎浏览器只是在鼠标移动时重新评估悬停状态，而不是在动画更改时。

您需要做的可能是手动检查框的位置以及用户的鼠标在每一帧的位置，并通过 JavaScript 更新 css 而不是依赖:hover。

或者，只需等待浏览器修复此错误。正如@Pondwater 指出的那样，它适用于 Firefox 30。

【讨论】：

是的，当您将鼠标悬停在元素上并且不移动鼠标时也适用，:hover 状态将持续到鼠标移动为止。这个问题也有点深。在该 Codepen 上，单击重新启动按钮。然后将鼠标悬停在元素上，不要移动鼠标。等到元素移动到光标之外。然后按 Enter 触发重新启动。 :hover 状态仍然存在。