I have a page that performs an Ajax request that replaces a div every second. This div also has hyperlinks in it.
If the user tries to click one of the hyperlinks, it will work, but if they move the cursor over the link, wait for a second without moving the cursor, the hyperlink no longer has the "hover" pseudostyle and if they click at the wrong time, the link doesn't work.
Is there a way to update the div without causing this, or to restore the "mouse over" state of the link?
I think that your best bet would be to just update the link(s) individually, instead of destroying and recreating the full container div. This should eliminate the "flicker" which is causing the link to behave that way.
Usability wise it sounds like a bad idea to update a div with links the user is supposed to be able to click... If the content is not actually changed with each refresh (just re-rendered by replacing it with the same content) it will not only flicker needlessly but it may cause the links to malfunction as you've noticed.
You could fix that by (somehow) comparing the old and new content of the div and do nothing if the content hasn't changed, but when it does change it would be quite confusing for the user if it changes just before they click. If you need to update the links with different content I'd suggest you implement some kind of animation (on actual change) like a fade-out+fade in or something, that would notify the user that the link they're aiming for is about to disappear. (I'd suggest a really slow fade-out (1-2 seconds) of the old content, and a quite fast fade in (50-200 ms maybe).
About hover style not working without moving the mouse; I really don't think you can do something about that, because that's browser behaviour. Moving the element using js or other fancy tricks, may or may not work and is probably not worth the effort. And if you only update the content when it has actually changed the link may not allways be in the same spot anyway...