JQuery hover does not start when an item is programmatically moved under the mouse

Question

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

However, the image itself is moving (I periodically change the top css attribute). When the mouse does not move and the image moves under the mouse cursor, no related events are triggered. This means that guidance functions are not called. I also tried using the mouseenter and mouseleave events, but they do not work either.

What would be a good approach to get the desired behavior (freezing effect whenever the mouse is over the image, regardless of why it got there)?

Answer 1

You will not be able to fire mouse events if the mouse does not move, although you can check where the mouse is when the image moves. What you need to do is to track the position of the mouse in the global variable and check if this position is inside your image when you move it.

JQuery has a good article on how to do this using its library: http://docs.jquery.com/Tutorials:Mouse_Position

To find the position of your image, you can use the jQuery position function: http://api.jquery.com/position/

With this position you can create borders using the height / width of your image. On your image, move the checkbox to see if this global mouse position is inside your image and you should be good to go.

Here is how I would write the code (completely untested btw):

var mousex = 0; var mousey = 0; jQuery(document).ready(function(){ $(document).mousemove(function(e){ mousex = e.pageX; mousey = e.pageY; }); }) img.move(function(){ ...move code... var p = $(this).position(); if(mousex >= p.left && mousex <= p.left + $(this).width && mousey <= p.top && mousey >= p.top + $(this).height) { ...opacity code... } }); 

Answer 2

You can manually check if the mouse is displayed on the image when you move the image and then trigger the desired event.

A mouse position using jQuery outside of events will show you how to track the position of the mouse. Then just find the image offset and see if it is inside the image.

Answer 3

In addition to the wajiw and ryan answers, you should fire mouseenter and mouseleave events as you find that the mouse is inverted / not above the image, so any code that you associate with .hover() is still executing:

 $(".my-image").trigger("mouseenter"); $(".my-image").trigger("mouseleave"); 

Answer 4

@wajiw posted a great solution, but unfortunately it suffers from typos, which means it won’t work out of the box until you fix it.

Here is a class that you can use that is tested and working, which allows you to check if the 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 this helps.

I could make it into the jQuery plugin very easily, if anyone wants to, just email me and I will go ahead.

Matt