Hover does not work on div animation

Question

I made an encoder with an animated Tweenlite box. In the field there is: hover in css. If you place the mouse on the path of the animated frame so that it “hits” the mouse, you see that the freezing effect does not occur. This only happens when you move the mouse.

How to fix it?

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

Here's the continuation of Jcubed's answer:

Essentially, it calculates the position of the mouse and checks it for the position of objects, and then sees if the distance between them is less than 25 pixels every 100 ms.

If the object is less than 25px (half the width of the object), it is inside it and will add a hover class. If it is larger, it will remove the hover class.

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

Answer 2

, . , , , .

, , - , , , - , css JavaScript , :hover.

, . @Pondwater, firefox 30.