Remove button hover state after jQuery / CSS3 transition -

i scoured site , web not find answer this.

i'm using <button> tag jquery reveal registration form click function. click triggers button animate side using css3 transformx.

the problem is, button still remains in :hover state thought cursor no longer on button. looks pretty stupid because :hover state changes button color, , happens in browsers tested far. after cursor moves :hover state end.

i tried using .unbind('onmouseover').unbind('onmouseout'); , $(this).unbind('mouseenter mouseleave') neither work. tried placing these right after click function , in callback after css animation.

i'm new jquery maybe obvious, can't figure out. code optimized well, i'm trying work first. works short of weird button behavior.

using jquery 2.1.1 , jquery ui 1.11.1

here full jquery:

jquery("#regexpander").click(function() {             if ($('#regexpander:contains("begin registration +")').length) {                 $('#regexpander').text("hide registration –").toggleclass('lbactive').css({transform: 'translatex(-140px)'});                 $( "#reginfo" ).fadeout( "slow", function () {                     jquery("#pagecontents").slidetoggle(900, 'easeinoutcubic');                 });             }              else if ($('#regexpander:contains("hide registration –")').length){                 $('#regexpander').text("begin registration +").css({transform: 'translatex(0)'}).toggleclass("lbactive").unbind('mouseenter mouseleave');                 jquery("#pagecontents").slidetoggle(900, 'easeinoutcubic', function () {                     $( "#reginfo" ).fadein( "slow", function () {                     });                 });             }  });