1

我有一个带有一些文本的 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>

我希望这两个链接出现在“我的文字”上悬停并在 mousout 上消失，但有延迟？帮助？！

非常感谢！桑德

4

3 回答 3

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

演示。

于 2012-11-14T00:01:16.080 回答
0

我会让你开始：

  1. jQuery 入门
  2. jQuery 选择器
  3. jQuery 事件
  4. jQuery 切换
于 2012-11-13T23:45:53.990 回答
0

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

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

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

于 2012-11-13T23:48:47.217 回答