延迟悬停鼠标事件

Question

我有一个带有一些文本的 DIV，当用户将鼠标悬停在文本上时，我希望一些链接出现在彼此相邻的div 下。但是，在鼠标退出带有文本的 Div 时，我不希望链接立即消失。现在我已经读了一些关于CSS延迟的内容，但IE似乎不支持这一点。我也准备了一些关于HoverIntent的东西，但是在Jquery方面我并不是一个真正的人才。有人可以帮助我或认识我吗？我的网页：

 <div id="text"><a href="" class="hoverlink">My text</a></div>
 <a href="">Link1</a>
 <a href="">Link2</a>

我希望这两个链接出现在"我的文本"上并消失在 mousout 上，但有延迟？帮助？！

多谢！Sander

Answer 1

有一些变化

.HTML

<div><a href="" class="hoverlink">My text 1</a></div>
<div class="links">
    <a href="">Link-1</a>
    <a href="">Link-2</a>
</div>

.JS

​$(function(){
    var timeOut=0;
    $('.hoverlink').on({
        'mouseenter':function(){
            $(this).parent().next('.links').show();
        },
        'mouseleave':function(){
            var next=$(this).parent().next('.links');
            timeOut=setTimeout(function(){
                next.hide();
            }, 1000);
        },
    });
    $('.links').on({
        'mouseenter':function(){
            clearTimeout(timeOut);
        },
        'mouseleave':function(){
            $(this).hide();
        }
    });
});​

演示。

Answer 2

我会让你开始：

1. j查询入门
2. jQuery 选择器
3. j查询事件
4. j查询切换

Answer 3

我找到了一个很棒的教程，它实际上解释了我想要什么：

http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility

问题可以关闭！谢谢桑德