悬停不适用于动画div

Torben 发表于 Dev

托本

我用Tweenlite动画盒制作了一个Codepen。该框在CSS中有一个：hover。如果将鼠标放在动画框的路径中，以使其“命中”鼠标，您将看不到悬停效果。仅当鼠标在其上移动时才会发生。

我该如何解决？

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

.red {
  background-color:red;
}

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

Mathias Rechtzigel

这是Jcubed回答的延续：

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

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

密码笔

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