I'm having an issue where elements do not lose their :hover when the element is animated away from the mouse via jQuery animate().
The :hover stays applied until the mouse is moved. Is there any way to stop this behavior?
It seems to happen in IE, Chrome, and Firefox.
There is a way to remove the hover state, but it may not work on all browsers and has its drawbacks.
The secret weapon is the CSS property pointer-events. If you set it's value to none, then the element no longer receives mouse events. If it's in a hovered state it loses that state (tested in Chrome and Safari).
Removal of the hover state only works while the mouse pointer is still over the element. So if you do that before the animation starts you will see either no hover state at all or a short flash, depending on the browser.
If that's a problem for you, you need to calculate a timeout or use a progress handler for .animate() to get the right moment.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments