Question

我用Tweenlite动画框制作了一个codepen。该框有一个：悬停在CSS中。如果将鼠标放在动画框的路径中以便“点击”鼠标，则会看到悬停效果不会发生。它只在鼠标移动时发生。

我该如何解决？

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

.red {
  background-color:red;
}

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

Answer 1

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

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

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

Answer 2

这是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

悬停不工作动画div

2 个答案: