我在任务栏中有一个" start" -button。将鼠标悬停在其上会显示更多选项(登录,注册,注销)。为方便起见,我还创建了一个(简化的)JSFiddle: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();
}
});
问题是我无法通过鼠标实现这些更多选项,因为只要我将鼠标悬停在" start"尽管使用了.unbind(),但选项仍然消失,但显然不正确:
$('#logout').on({
mouseenter: function(){
$('#start').unbind(); //this is supposed to unbind 1. but it doesn't!!!
} //more code goes here
(JSFiddle中的代码行29)。
我知道我可以简单地将更多选项(" .start_options")作为" .taskbar"的相对定位的子元素。并将它们设置为动画,向左滑出任务栏;但是,这可以通过任务栏" overflow-y:scroll;" -property来阻止,由于某种原因,它也会阻止" overflow-x"。
所以相反,我绝对定位了更多的选项,并将它们悬停在" start" -button上,但是如何在悬停时阻止/取消绑定它们(" mouseleave&# 34;在JSFiddle中" #start"?
非常感谢提前!
答案 0 :(得分:1)
无需取消绑定任何内容,您可以将另一个悬停绑定到滑块并且效果很好
$('.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();
}
});