如何解除鼠标中心(或悬停)

时间:2014-04-28 17:20:08

标签: jquery hover mouseenter unbind

我在任务栏中有一个" 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"?

非常感谢提前!

1 个答案:

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

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