How to make popup menu appear on hover delay?

Question

JavaScript

Hello.
Please help me implement pop-up menus with a delay, I understand what needs to be done in JS, since the menu contains a lot of elements, I did it in css, for example I will give the css code, the classes here are really different, but you should understand the essence.

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition: all .3s ease .15s; /* Добавляем анимацию 0.3 сек. и задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

So, why on JS and why the CSS option didn’t fit, the problem is that the user sometimes accidentally points to the menu item and it naturally appears, and on JS, as I understand it, this moment can be taken into account, i.e. if the user removed the cursor mouse from the menu item, then it did not appear.

Ps I hope that I didn't confuse anyone

Example on codepen.io

Googled, tried to do it, but it didn't work, because I don't understand anything in JS.

I would like to do like this example

Answer 1

As soon as the cursor is hovered over the button through setTimeout , we start the countdown until the menu appears, if the cursor is removed from the button, then we cancel the timeout through clearTimeout .

var timesArray = [];

$('.menu').hover(
    function()
    {
        var id = jQuery.data(this);
        timesArray[id] = setTimeout(function() {
            //Показываем меню
            $(this).css({'display' :  'block'});
            timesArray[id] = "";
        }, 500);
    },
    function()
    {
        var id = jQuery.data(this);
        //Скрываем меню
        $(this).css({'display' :  'none'});
        if (timesArray[id])
        {
            clearTimeout(timesArray[id]);
        }
    }
);

Try it.

Answer 2

If you need a delay on css, then there is a property transition-delay
And on JS setTimeout
It seems to me that everything can be done in css:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property:  opacity, visibility;   /* Задаем какие свойства анимировать */
    transition-duration: .3s, .3s;               /* Задаем продолжительность анимации для каждого свойства */
    transition-delay: .15s, .15s;                /* Задаем задержку анимации для каждого свойства */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}