javascript - 悬停不适用于动画 div

Question

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

我该如何解决？

http://codepen.io/anon/pen/EfAGn

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

.red {
  background-color:red;
}

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

Answer 1

这是 Jcubed 回答的延续:

本质上它是计算鼠标位置并将其与对象位置进行比较，然后每 100 毫秒查看两者之间的距离是否小于 25px。

如果对象小于 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