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!
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();
}
});