Javascript 悬停不在动画div上工作

我用Tweenlite动画框做了一个密码笔。该框在css中有一个：悬停。 如果将鼠标放置在动画框的路径中，使其“击中”鼠标，则不会出现悬停效果。只有当鼠标在上面移动时才会发生

我该如何解决这个问题

---

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

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

：hover

---

或者，只需等待浏览器修复此错误。正如@Pondwater所指出的，它在Firefox30中工作。

以下是Jcubed回答的延续：

基本上，它是计算鼠标的位置，并对照对象的位置进行检查，然后查看两者之间的距离是否小于每100ms 25px

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

（函数（）{
$（“#重新启动”）。在（“单击”，函数（）上）{
tl.重新启动（）；
})
变量mX，我的，距离，鼠标位置，
$距离=$（“#距离跨度”），
$element=$（“#redBox”）；
//运动
var tl=新的TimeLineite（）
tl.to（$element，15，{x:550}）；
setInterval（函数（）{
函数CalculateInstance（elem、mouseX、mouseY）{
返回Math.floor（Math.sqrt（Math.pow（mouseX-（elem.offset（）.left+（elem.width（）/2）），2）+Math.pow（mouseY-（elem.offset（）.top+（elem.height（）/2）），2））；
}
$（文档）.mousemove（函数（e）{
mX=e.pageX；
mY=e.pageY；
鼠标位置=（mX，我的）；
$distance.text（距离）；
});
距离=计算距离（$element，mX，mY）；
如果（距离<25）{
console.log（“鼠标已进入”）；
//添加悬停类
$（$元素）.addClass（'悬停'）；
}
否则{
//删除悬停类
$（$元素）.removeClass（'悬停'）；
}
//设置超时
}, 100);
})();

---

在Firefox 30.0版上对我有效，但在Chrome 35.0版上不行。在Chrome 35中，它只在第一次触发

：hover

事件后才起作用。是的，当您将鼠标悬停在元素上且不移动鼠标时，也适用

：hover

状态会一直持续到移动鼠标为止。这个问题也有点深。在该代码笔上，单击重新启动按钮。然后将鼠标悬停在元素上，不要移动鼠标。等待元素移动到光标之外。然后按Enter键触发重新启动。

：hover

状态仍然存在。谢谢MathiasaurusRex-这样就可以了。

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

.red {
  background-color:red;
}

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

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