Hover state is sticky after element is moved out from under the mouse (in all browsers)

Question

I have a div that shows a series of slides, one at a time. It contains a link at the bottom of the box that triggers the switch to the next slide. When the link is clicked the box shows the next slide and the height of the box changes most of the time.

I have a :hover style applied to the link, however once the box's height changes and the link is moved out from under the mouse it keeps its :hover state until it is hover again.

I've tried calling .mouseleave() and .mouseenter().mouseleave() after the change has finished, but it doesn't have any effect. I also created a different :active & :focus state for the link, which I can see a flash of when the link is clicked, but then it returns to the :hover. A :visited style has no effect either.

I know there is a common bug in older versions of IE similar to this, but I'm seeing this happen in Chrome and Firefox as well.

Here's a jsfiddle.

Any ideas?

Answer 1

jsFiddle demo

The answer is pretty simple. As we release the mouse click the page jumps to reveal content, so the browser default behav. to register mouseleave and toggle class is missed.

Here are the fixes:

CSS:

a:active, a:selected, a:visited { /*  add his to remove stupid dotted outline */
    border: none;
    outline: none;
}

jQ1:

    $('#prev-page').on('mousedown', function (e) { // use mousedown (some issues with chrome)
        e.preventDefault();
        showPage(pages.index($($(this).attr('href')), 600));
    });
    $('#next-page').on('mousedown', function (e) { // here too!
        e.preventDefault();
        showPage(pages.index($($(this).attr('href'))), 600);
    });

jQ2:

pages.hide().eq(active).fadeIn(fadeTime, function () {
    // $('#next-page').trigger('mouseleave'); // remove to fix in FF
});