[SOLVED] Butttons don't hover after bind/unbind "mouseenter" and "mouseleave" functions

[SOLVED] Butttons don't hover after bind/unbind "mouseenter" and "mouseleave" functions

Hello everybody :)

I need some help with my menu buttons.
I have nice looking 3 buttons menu with fade effects + swaping PNG transparent images.
But I have some problem with bind/unbind "mouseenter" and "mouseleave" functions.

On the beginning everything works fine, hover is working on every element. After click button1 it's ok too - this button displays active image and hover functions are disable for only this button - that's what I wanted. Of course hover functions working on others: button2 and button3.
But.. after click button2 hover function is working only for button3. It should be working for button1 also. After click button3 there is no hover effects at all.

I can't figure out how enable "mouseenter" and "mouseleave" functions, it seems stop forever after click.

Here is my jQuery code:
  1. $('#menu-top a').on({

    mouseenter: function(e) {
    $("span",this).eq(1).css({left: $("span",this).eq(0).position().left, top: $("span",this).eq(0).position().top});
    $("span",this).eq(0).fadeOut(500);
    $("span",this).eq(1).fadeIn(500);
    },

    mouseleave: function(e) {
    $("span",this).eq(1).css({left: $("span",this).eq(0).position().left, top: $("span",this).eq(0).position().top});
    $("span",this).eq(1).fadeOut(500);
    $("span",this).eq(0).fadeIn(500);
    },

    click: function(e) {
    $("span:nth-child(2)").hide();
    $("span:nth-child(1)").show();
    $("span",this).eq(0).hide();
    $("span",this).eq(1).show();
    $("a").on("mouseenter mouseleave");
    $(this).off("mouseenter mouseleave");

    }

    });