鼠标事件的延迟悬停

Question

我有一些文本的DIV，当用户将鼠标悬停在文本上时，我希望某些链接在该div下面出现在彼此旁边。但是，在我的Div文本鼠标出现时，我不希望链接立即消失。现在我已经阅读了关于CSS的延迟，但IE似乎不支持这一点。我也已经准备好了关于HoverIntent的一些事情，但在Jquery方面我并不是一个真正的天才。任何能够帮助我或得到满足的人都开始了？我的HTML：

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

<a href="">Link1</a> 
<a href="">Link2</a> 

我希望两个链接，在“我的文字”和dissapear上mousout悬停时出现，但有延迟？帮帮我？！

非常感谢！ 桑德

Answer 1

我会得到你开始：

1. jQuery getting started
2. jQuery selectors
3. jQuery events
4. jQuery toggle

Answer 2

我发现了一个伟大的教程，实际上解释了我想要的东西：

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

问题可以关闭！谢谢， 桑德

Answer 3

有了一些变化

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

DEMO。