как предотвратить исчезновение элемента при наведении на него курсора

Question

У меня есть выпадающий список:

<div id="projectPopup">
 <h1 id="projectTitle">Select Project</h1>
 <div class="projectOption" style="background: rgba(220, 220, 220, 0.6);">Test project for time tracking</div>
 <div class="projectOption">TimeTracking</div>
</div>

Появляется после того, как я нажимаю на ссылку, и получаю отображение: flex style; Также этот щелчок запуска тайм-аут:

 clockifyButton.popupTimer = setTimeout(() => {
          popup.style.display = "none";
          startWithDescription();
        }, 5000);

И после 5 с элемент получить дисплей: нет стиля, мне нужно иметь его с дисплеем: гибкий, когда курсор находится на нем, как я могу это сделать? Спасибо вперед *

#projectPopup {
  position: fixed;
  margin-left: 85%;
  top: 0;
  width: 230px;
  display: none;
  z-index: 999;
  flex-direction: column;
  border: 1px solid #D3D3D3;
  background: rgba(255, 255, 255, 0.9); /* Цвет фона */
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}

Это стили всплывающего окна

Answer 1

Вы можете попытаться запустить popupTimer для события mouseleave. Но было бы важно контролировать таймер в событии mouseenter, удаляя старый счетчик, иначе у вас будет много запущенных счетчиков одновременно.