jQuery hover gets stuck when I mouse quickly - 【StackMirror】|jquery|css|hover|mouseover

I've got a button that says "SUBSCRIBED", and when the user mouses over it, I want to replace it with another button that says "UNSUBSCRIBE".

(Kind of like how Twitter has the FOLLOWING button that turns into UNFOLLOW if you hover.)

Here's what I've got so far.

$(document).ready(function(){
    $('#subscribed_button').hover(function(){
        $('#subscribed_button').css("display","none");
        $('#unsubscribe_button').css("display","inline");
    },function(){
    });
    $('#unsubscribe_button').hover(function(){
    },function(){
        $('#unsubscribe_button').css("display","none");
        $('#subscribed_button').css("display","inline");
    });
});

Everything is a-ok, except when I mouse quickly, in which case the "hover on" seems to get detected, but not the "hover off". So my button occasionally gets stuck in "UNSUBSCRIBE"...which is weird and visually distracting.

Most of the solutions I've seen on Stackoverflow have been related to stopping animations, but in this case, I'm not animating anything; it's a simple display on/off.

Any ideas?

2012-04-04 19:08
by isthmus

could you please submit an live example? - Jorge 2012-04-04 19:11

There's actually something called :hover in CSS for this, and there's way to many functions in that code - adeneo 2012-04-04 19:15

please use caching.. - binarious 2012-04-04 19:17

@Jorge, I'm hesitant to push the code to the WWW when it's not working - isthmus 2012-04-04 19:54

@adeneo I normally would use :hover for styling, but in this case I'm actually changing the text of the button, and I couldn't figure out a way to do that in pure CSS without involving Javascript somewhere - isthmus 2012-04-04 19:55

Without seeing it in action, I'm assuming it's because you're showing/hiding 2 different html elements. When you quickly mouse over and out, it's possible the non-active element hasn't become active, etc. etc. causing issues.

For better stability and performance I'd recommend the following:

Use only a single html element for your subscribe/unsubscribe, and rather than showing/hiding 2 elements, simply change the text of the button and/or swap out the background image through a change of css class, etc. Even better if using an image background would be to use a single background image containing both states and just update the background position depending on current state.

The above is simply a concept as you haven't posted your entire code, so modifying it for the above is not possible.

2012-04-04 19:19
by KP.

Thanks, that did it! And @binarious gave me a good snippet. Thanks to both you guys - isthmus 2012-04-04 19:59

I would use just one element:

$(function() {
    var $sub = $('#subscribe_button');

    $sub.hover(function() {
        $sub.text('Unsubscribe');
    }, function() {
        $sub.text('Subscribe');
    });

});

2012-04-04 19:21
by binarious

Thanks! @KP. gave me the theory, and you gave me the practice. Works great - isthmus 2012-04-04 19:58

In jQuery there are methods called mouseenter and mouseleave. http://api.jquery.com/mouseenter/ If you use those it will help with the proper bubbling and should fix your problem.

2012-04-04 19:20
by laymanje

Thought that would do it, but no dice, sadly - isthmus 2012-04-04 19:55

Can you post an example of the mouseenter and leave in use - laymanje 2012-04-04 19:57