Как можно добавить задержку к появлению меню?

Как можно добавить задержку появления меню при наведении курсора на теги, реализованные в виде кнопок в редакторе текста?
  • 3 июля 2024 г. 0:52
Ответы на вопрос 2
Для добавления задержки к появлению меню при наведении курсора на теги, реализованные в виде кнопок в редакторе текста, можно использовать CSS и JavaScript. 

Пример использования CSS:

```css
.menu {
    display: none;
}

.button:hover + .menu {
    display: block;
}

.menu {
    transition: 0.5s; /*добавляем задержку в полсекунды */
}
```

Пример использования JavaScript:

```javascript
const button = document.querySelector('.button');
const menu = document.querySelector('.menu');

button.addEventListener('mouseover', () => {
    setTimeout(() => {
        menu.style.display = 'block';
    }, 500); //задержка в полсекунды
});

button.addEventListener('mouseout', () => {
    menu.style.display = 'none';
});
```

Эти примеры позволят добавить задержку к появлению меню при наведении курсора на кнопки в редакторе текста.
Лучше конечно делать на js и добавлять класс active через нужный промежуток времени. На js это более красиво и эстетично чтоль... Но если надо css, то вот так: 
С процентами и временем уж сами.
Похожие вопросы