jQuery hover not triggered when element is programatically moved under the mouse

Question

I have an image with a hover effect (higher opacity when mouse is over it). It works as desired when the mouse moves in and out.

However, the image itself is moving

Answer 1

@wajiw has posted a great solution, but unfortunately it's plagued with typos meaning it won't work out of the box until you fix it.

Here is a class you can use which is tested and works which will allow you to test if an object is under the mouse.

Class definition

// keeps track of recent mouse position and provides functionality to check if mouse is over an object
// useful for when nodes appear underneath the mouse without mouse movement and we need to trigger hover
// see http://stackoverflow.com/questions/4403518
function MouseTracker($) {
  var mouseX, mouseY;

  $(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });

  return {
    isOver: function(node) {
      var p = $(node).offset();
      if (mouseX >= p.left && mouseX <= p.left + $(node).width()
         && mouseY >= p.top && mouseY <= p.top + $(node).height())
      {
        return true;
      }
      return false;
    }
  }
}

Usage example

var mouseTracker = new MouseTracker(jQuery);
if (mouseTracker.isOver($('#my-object-in-question'))) {
  $('#my-object-in-question').trigger("mouseenter");
}

Hope that helps.

I could make this into a jQuery plugin very easily if anyone wants it, just drop me a line and I'll go ahead.

Matt