How to unbind mouseenter (or hover)

Question

I have a "start"-button in a taskbar. Hovering over it displays further options (login, register, logout). I've also created a (simplified) JSFiddle for your convenience: http://jsfiddle.net/wF43d/4/

//1. bind mouseenter / mouseleave to imitate ".hover()":
$('#start').bind({
  mouseenter: function(e) 
          {//some other positioning code goes here
          $slider.show();
          },

  mouseleave: function(e) 
          {
          $slider.hide();
        }
 });

The problem is that I can't reach these further options with the mouse since as soon as I hover out of "start" the options disappear despite having used .unbind(), but obviously incorrectly:

$('#logout').on({
mouseenter: function(){
    $('#start').unbind(); //this is supposed to unbind 1. but it doesn't!!!
} //more code goes here

(code line 29 in the JSFiddle).

I know I could simply include the further options (".start_options") as a relatively positioned child element of the ".taskbar" and animate them to slide to the left out of the taskbar; however, this is prevented by the taskbar's "overflow-y: scroll;"-property, which for some reason also blocks "overflow-x".

So instead I positioned the further options absolutely and show them upon hovering over the "start"-button, but how do I prevent/unbind them from being hidden when hovering out ("mouseleave" in the JSFiddle) of "#start"?

Many thanks in advance!

Answer 1

No need to unbind anything, you can bind another hover to your slider and it works good

$('.start_options').bind({
    mouseleave: function () {
        var $start = $(this),
            startOffset = $start.offset();

        $slider = $('.start_options');
        $slider.css({
            position: 'absolute',
            top: startOffset.top,
            left: startOffset.left - ($slider.width()) + 10
        });

        $slider.hide();
    },

    mouseenter: function (e) {
        $slider.show();
    }
});

http://jsfiddle.net/wF43d/5/