如何用JavaScript实现鼠标悬停显示区块且移入区块不关闭

你需要的核心逻辑是通过鼠标事件结合定时器，实现弹窗在hover区域和自身范围内保持显示，离开后才隐藏。以下是修改后的完整代码：

HTML（无需修改） #

<div class="demo">
  <p class="hover">hover goin</p>

  <div class="wrap">
    <h2>title</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo modi quasi </p>
  </div>
</div>

CSS（无需修改） #

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  position: relative;
}

.hover {
  font-size: 30px;
  font-weight: 900;
  color: blue;
  border: 2px solid #222;
  color: #fff;
  cursor: pointer;
  background-color: red;
}

.wrap {
  position: absolute;
  top: 80px;
  width: 120px;
  padding: 10px;
  background-color: blue;
  color: #fff;
  border: 2px solid #222;
  display: none;
}

JavaScript（核心逻辑实现） #

let hover = document.querySelector('.hover');
let wrap = document.querySelector('.wrap');
let hideTimer = null; // 控制延迟隐藏的定时器

// 鼠标进入hover区域：显示弹窗，清除之前的隐藏定时器
hover.addEventListener('mouseenter', () => {
  wrap.style.display = 'block';
  clearTimeout(hideTimer);
});

// 鼠标离开hover区域：设置延迟隐藏弹窗，给鼠标移到弹窗的缓冲时间
hover.addEventListener('mouseleave', () => {
  hideTimer = setTimeout(() => {
    wrap.style.display = 'none';
  }, 300);
});

// 鼠标进入弹窗区域：清除隐藏定时器，保持弹窗显示
wrap.addEventListener('mouseenter', () => {
  clearTimeout(hideTimer);
});

// 鼠标离开弹窗区域：立即隐藏弹窗
wrap.addEventListener('mouseleave', () => {
  wrap.style.display = 'none';
});

逻辑说明 #

1. 显示弹窗：鼠标移到红色hover区块时，直接显示蓝色wrap，并清除可能存在的隐藏定时器，避免弹窗被意外隐藏。
2. 延迟隐藏：鼠标离开hover区块时，设置300ms延迟再隐藏弹窗，这段时间足够鼠标移动到wrap区块内。
3. 保持显示：鼠标进入wrap区块后，立刻清除隐藏定时器，确保弹窗持续显示。
4. 关闭弹窗：鼠标离开wrap区块后，直接隐藏弹窗，符合需求。

内容的提问来源于stack exchange，提问作者AWEI