Search code examples
hoverdelay

How do I add a delay to the hover?

I'm trying to add a delay here so that when the user hovers over the menu blocks it doesn't execute right away and waits say .3 seconds before launching the menu. Should I do this via css or jQuery?

_mouseOverHandler = function (event) { 
    clearTimeout(this.mouseTimeoutID);
    $(event.target) 
        .addClass(this.settings.hoverClass);
    _togglePanel.call(this, event);  
    if ($(event.target).is(':tabbable')) {
        $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target));
    }
};
Solution

  • Maybe you can do it by using setTimeout JS function

    setTimeout(function(){
 // in here you should add what you need to do.
},300);

    In case you wish to do this by using css you could do it by using transitions

    .button{
    transition: 0s background-color;
}

.button:hover{
    background-color:blue;    
    transition-delay:.3s;
}