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>

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

非常感谢！桑德

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

DEMO

Answer 2

我会帮你的：

Answer 3

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

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

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

延迟悬停鼠标事件

3 个答案: