DIV innerHTML redraw causes items that were hovered to go back to normal

Question

I have a DIV container that draws a list of bars (al container 'onmousemove' and 'onmouseout' events). When an item is hovered, it changes the images of the item, and back again when the mouse is moved away.

Now, I have a looped AJAX request that gets the new information for this DIV container and re-draws the innerHTML every 3 seconds, causing whatever item i have my mouse over to go back to its normal state (un-hovered).

Does anyone have any suggestions on how to fix this? Is there a method to force a mouse move? Any help would be greatly appreciated.

Answer 1

Is this a good design to poll an AJAX request every 3 seconds?

Why don't you set a flag when mouse is over the item and when the response is fed to the div then check the flag and show the image change.

Edit:

Check

event.initMouseEvent

Intializes the value of a mouse event once it's been created (normally using document.createEvent method).

This might be useful.

Answer 2

What you are trying to accomplish is more efficiently executed using the hover pseudo-class of CSS instead of firing JavaScript.