Reputation: 327

Delay hover for a mouse event

I have a DIV with some text, when the user hovers over the text I want some links to appear under that div next to each other. However, on mouseout of my Div with text I don't want the links to dissapear immediatly. Now I've read something about delay with CSS, but IE doesn't seem to support this. I've also ready something about HoverIntent, but I'm not really a talent when it comes to Jquery. Anybody who could help me or get met started? My HTML:

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

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

I want the two links to appear on hover over the 'My text' and dissapear on mousout, but with a delay? Help?!

Thanks a lot! Sander

Upvotes: 1

Answers (3)

The Alpha

Reputation: 146191

With some changes

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>

$(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.

Upvotes: 1

user1555076

Reputation: 327

I found a great tutorial that actually explains what I want:

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

Question can close up! Thanks, Sander

Upvotes: 0