Mouseover事件未按预期传播（按钮高亮效果实现问题）

修复JavaScript实现方案 #

你的问题根源有三点：

1. mouseover仅在鼠标首次进入元素时触发一次，无法持续跟踪移动；且鼠标从父元素移到子元素时会触发事件切换，导致逻辑混乱
2. .highlight未设置定位，transform的参考系错误，位置偏移不符合预期
3. 坐标计算依赖offsetLeft/offsetTop，冗余且易受页面布局影响

修改后的完整代码：

HTML

<button class="button">
  Button Text
  <div class="highlight"></div>  
</button>

CSS

.button {
  border: 1px solid black;
  width: 400px;
  height: 70px;
  position: relative; /* 作为子元素绝对定位的参考容器 */
  overflow: hidden; /* 隐藏超出按钮范围的高亮 */
  cursor: pointer;
}

.highlight {
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #e66465, #9198e5);
  pointer-events: none; /* 让鼠标事件穿透高亮元素，避免干扰父元素监听 */
  transform: translate(-50%, -50%); /* 让高亮中心对齐鼠标位置 */
  opacity: 0;
  transition: opacity 0.2s;
  left: var(--x);
  top: var(--y);
}

JavaScript

const button = document.querySelector('.button');
const highlightDiv = document.querySelector('.highlight');

// 用mousemove持续跟踪鼠标位置
button.addEventListener('mousemove', (e) => {
  // offsetX/Y直接获取鼠标相对于按钮内部的坐标
  highlightDiv.style.setProperty('--x', `${e.offsetX}px`);
  highlightDiv.style.setProperty('--y', `${e.offsetY}px`);
});

// 鼠标进出时控制高亮显隐
button.addEventListener('mouseenter', () => {
  highlightDiv.style.opacity = '1';
});
button.addEventListener('mouseleave', () => {
  highlightDiv.style.opacity = '0';
});

无JavaScript的近似实现方案 #

纯CSS无法实时获取鼠标精确坐标，但可以通过模拟方式实现近似跟随效果，利用:hover与渐变组合：

.button {
  border: 1px solid black;
  width: 400px;
  height: 70px;
  position: relative;
  cursor: pointer;
  background: radial-gradient(circle at var(--mouse-pos, 50% 50%), rgba(230, 100, 101, 0.3), rgba(145, 152, 229, 0.3) 40%, transparent 60%);
}

/* 通过子元素hover触发不同区域的渐变偏移（可扩展更多区域） */
.button:hover .text {
  --mouse-pos: 20% 50%;
}
.button:hover .right-area {
  --mouse-pos: 80% 50%;
}

这种方案只能实现固定区域的高亮偏移，无法做到完全实时跟随，精确效果仍需JavaScript配合。

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