Here's a continuation of Jcubed's answer:
Essentially it's calculating the mouses position and checking it against the objects position, and then seeing if the distance between the two is less than 25px every 100ms.
If the object is less than 25px (half of the object width) then it is inside of it and will add the hover class. If it is greater 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);
})();
Here's some additional information from Chris Coyier
:hover
event should have triggered.