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

演示：Fiddle

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

2 个答案: