时间戳

首页 > 解决方案 > 如何防止光标在元素上时消失

javascript - 如何防止光标在元素上时消失

问题描述

我有一些下拉列表：

<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>

它在我点击链接后出现，并得到 display: flex style; 还有这个点击开始超时：

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

在 5s elem 得到 display: none 样式后，我需要使用 display: flex，当光标在它上面时，我该怎么做？感谢转发！！！

#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); /* Параметры тени */
}

这是弹出窗口的样式

标签： javascriptcsstimeout

解决方案

您可以尝试在 mouseleave 事件上启动 popupTimer。但重要的是在 mouseenter 事件中控制计时器，移除旧计数器，否则您将有很多计数器同时运行。

推荐阅读