懸停不起作用於動畫div

我用Tweenlite動畫框做了一個codepen。該框有一個：懸停在CSS中。如果您將鼠標放在動畫框的路徑中，以便點擊鼠標，您將看到懸停效果不會發生。只有當鼠標移動它時纔會發生。懸停不起作用於動畫div

我該如何解決這個問題？

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

.red { 
    background-color:red; 
} 

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

來源

2014-07-16 Torben

它爲我的Firefox版本30.0，但無法在Chrome 35.0。 – kbirk

對於Chrome 35中的我，只有在第一次觸發'：hover'事件後才能使用。 – RevanProdigalKnight

這裏的Jcubed的回答的延續：

基本上就是計算鼠標位置，並檢查它針對的對象的位置，然後看是否兩者之間的距離每100ms小於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

來源

2014-07-16 19:00:13

謝謝MathiasaurusRex - 那會很好。 – Torben