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

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

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

不幸的是，

#loginform

不是

#loginbutton

的子项，尽管两个div重叠

如果鼠标离开

#登录按钮

并移动到

#登录表单

上，有没有办法保持

#登录表单

的可见性

---

小提琴：

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

使用计时器

$('#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');
})

---

演示：

请也添加HTML。或者创建一个JSFIDLE。

$('#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');
})