Take the 2-minute tour ×

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.


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?

share|improve this question
could you please submit an live example?? –  Jorge Apr 4 '12 at 19:11
There's actually something called :hover in CSS for this, and there's way to many functions in that code? –  adeneo Apr 4 '12 at 19:15
please use caching... –  binarious Apr 4 '12 at 19:17
@Jorge, I'm hesitant to push the code to the WWW when it's not working. –  isthmus Apr 4 '12 at 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 Apr 4 '12 at 19:55
add comment

3 Answers

up vote 3 down vote accepted

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.

share|improve this answer
Thanks, that did it! And @binarious gave me a good snippet. Thanks to both you guys. –  isthmus Apr 4 '12 at 19:59
add comment

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.

share|improve this answer
Thought that would do it, but no dice, sadly. –  isthmus Apr 4 '12 at 19:55
Can you post an example of the mouseenter and leave in use? –  laymanje Apr 4 '12 at 19:57
add comment

I would use just one element:

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

    $sub.hover(function() {
    }, function() {

share|improve this answer
Thanks! @KP. gave me the theory, and you gave me the practice. Works great. –  isthmus Apr 4 '12 at 19:58
add comment

Your Answer


