jquery - 如果 div 不是触发元素的子元素，则在悬停时保持 div 的可见性

Question

我有一个简单的悬停在脚本上：

$('#loginbutton').hover(
  function () {
    $('#loginform').stop().fadeIn('fast');
  },
  function () {
    $('#loginform').stop().fadeOut('fast');
  }
);

不幸的是，#loginform不是 的孩子#loginbutton，尽管两个 div 重叠。

#loginform如果鼠标离开#loginbutton并移动，有没有办法保持可见性#loginform？

小提琴：http: //jsfiddle.net/P4sxH/

Answer 1

有点hacky，但我想我明白了：

http://jsfiddle.net/P4sxH/2/

$('#loginform').hover(
  function () {
    $('#loginform').stop().fadeIn('fast');
  },
  function () {
    $('#loginform').stop().fadeOut('fast');
  }
);

$('#loginbutton').hover(
  function () {
    $('#loginform').stop().fadeIn('fast');
  },
  function () {
    $('#loginform').stop().fadeOut('fast');
  }
);

Answer 2

使用计时器

$('#loginbutton').hover(
    function () {
        $('#loginform').stop().fadeIn('fast');
    },
    function () {
        var timer = setTimeout(function(){
            $('#loginform').stop().fadeOut('fast');
        }, 200);
        $('#loginform').data('hidetimer', timer)
    }
);

$('#loginform').hover(function(){
    clearTimeout($(this).data('hidetimer'));
}, function(){
    $(this).stop().fadeOut('fast');
})

演示：小提琴