Stop ":hover" elements from holding their state when animated away from cursor with jQuery?

Question

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.

*"Is there any way to stop this behavior?"* not that i can think of, i don't think there's anything you can do with javascript that would force the browser to re-evaluate whether or not the mouse is over an element. You could remove the :hover and replace it with a hover class, then add/remove the class with javascript that way you can remove the class when you animate to simulate the mouse leaving it(though, the leave event will be triggered, so that likely wouldn't be needed either) — Kevin B, Jan 10 '14 at 17:18
Can you show us what you've tried ? Perhaps prepare a fiddle ? — SAFEER N, Jan 10 '14 at 17:18
Actually my suggestion won't work either, because the mouseleave event also won't be triggered unless you move the mouse. — Kevin B, Jan 10 '14 at 17:27
Had the similar issue http://stackoverflow.com/questions/20886903/css-hover-works-only-when-mouse-moves the only viable answer is to check mouse position against element position — Yuriy Galanter, Jan 10 '14 at 17:32
If it can be assumed that with every animate the element would lose its hover state, then why not set a callback on animate to remove said hover state? — JerryHuang.me, Jan 10 '14 at 18:39

score 2 · Accepted Answer · edited Dec 06 '17 at 09:05

2

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.

edited Dec 06 '17 at 09:05

Salomon Zhang

1,553
3
23
41

answered Jan 10 '14 at 21:35

a better oliver

26,330
2
58
66

Although this wouldn't work with my application, needing IE support, I feel it is the most accurate answer to the question posed. I ended up adding a class via Javascript. – christian Jan 15 '14 at 16:49
Hey Guys, I've successfully overcome the problem of using animate.css with bootstrap dropdowns using the pointer-events: none; trick thanks a million. However this does not work with – philip Jan 12 '18 at 18:57

score 0 · Answer 2 · answered Jan 10 '14 at 17:36

you can give another function or event using time out function.

$("#box").one("mouseenter",function(){
    var $this = $(this);
    $(this).css('color','green');
    window.setTimeout(function(){
        $this.css('color','red');
    },300);
})

this type of method work without leaving hover state. I don't know this type of method work for you..

score 0 · Answer 3 · answered Jan 17 '16 at 05:25

I was having the same problem. The jquery animate function moves the element out from under the mouse cursor and thus does not receive the mousemove or mouseleave event that would reset the :hover state to off.

I found that I couldn't use the CSS pseudo-class selectors, and instead had to rely on the jquery hover() api method to add/remove a separate CSS class manually.

$('li.hoverable').hover(
    function () { $(this).addClass('hovering'); },
    function () { $(this).removeClass('hovering'); });

Then later

// animate back to the final position
elem.animate({ top: 0, left: 0 }, 400, "easeInOutCubic",
    function () { elem.removeClass('hovering'); });

Stop ":hover" elements from holding their state when animated away from cursor with jQuery?

3 Answers3