当父容器启用垂直滚动时，仅用鼠标滚轮滚动不会触发子元素的 mouseover/:hover，因为浏览器不会自动重计算鼠标指针相对于滚动后视口的位置；本文提供基于 elementFromPoint() 的可靠方案，手动同步 hover 状态。
当父容器启用垂直滚动时，仅用鼠标滚轮滚动不会触发子元素的 `mouseover`/`:hover`，因为浏览器不会自动重计算鼠标指针相对于滚动后视口的位置；本文提供基于 `elementfrompoint()` 的可靠方案，手动同步 hover 状态。
在 Web 开发中，一个常见却易被忽视的交互细节是：滚动操作本身并不会触发鼠标事件的重新评估。即使鼠标光标静止停留在某个 .child_div 上，当用户通过滚轮滚动 .parent_div 时，该子元素可能已移出光标下方，但浏览器不会主动派发 mouseleave 或 mouseenter，也不会更新 :hover 伪类样式——直到你轻微移动鼠标，触发 mousemove，浏览器才重新采样光标坐标并刷新悬停状态。
根本原因在于：hover 状态的判定依赖于当前鼠标绝对坐标（clientX/clientY）与 DOM 元素布局位置的实时匹配。滚动仅改变容器的 scrollTop，但不重置或广播鼠标位置上下文。因此，elementFromPoint(x, y) 成为关键突破口：它能根据指定视口坐标返回当前位于该点的最深层元素，从而手动模拟“悬停目标识别”。
魔搭GPT（ModelScopeGPT）
下载
魔搭GPT（ModelScopeGPT）是一款AI视频创作工具，阿里达摩院推出的大小模型协同的智能助手，具备作诗、绘画、视频生成、语音播放等多模态能力。
以下是一个完整、健壮的解决方案：
✅ 核心思路：监听滚动 + 动态定位 + 状态同步
$(document).ready(() => {
// 生成子元素
const $parent = $('.parent_div');
for (let i = 0; i `);
}
let lastX = 0;
let lastY = 0;
// 记录鼠标最新位置（视口坐标）
$(document).on('mousemove', e => {
lastX = e.clientX;
lastY = e.clientY;
});
// 滚动时主动查找当前光标下的元素并高亮
$parent.on('scroll', () => highlightUnderCursor($parent));
// 同时监听 window scroll（兼容页面级滚动影响）
$(window).on('scroll', () => highlightUnderCursor($parent));
function highlightUnderCursor($container) {
// 清除所有 active 状态
$('.child_div').removeClass('active');
// 计算光标在滚动容器内容区内的逻辑 Y 坐标
const scrollY = $container.scrollTop();
const contentY = lastY + scrollY; // 注意：此处需结合容器 offset 调整更精确（见下方说明）
// 获取该坐标点下的 DOM 元素
const targetEl = document.elementFromPoint(lastX, lastY);
if (targetEl && $(targetEl).hasClass('child_div')) {
$(targetEl).addClass('active');
}
}
// 原生 hover 事件作为兜底（保留原生体验）
$(document).on('mouseenter', '.child_div', function() {
$('.child_div').removeClass('active');
$(this).addClass('active');
});
$(document).on('mouseleave', '.child_div', function() {
$(this).removeClass('active');
});
});
? 关键注意事项
- elementFromPoint(x, y) 参数是视口坐标（viewport coordinates），不是文档坐标：因此直接使用 event.clientX/clientY 即可，无需加 scrollTop。原答案中 y + target.scrollTop() 是错误的——这会导致坐标偏移。正确做法是：保持 x, y 为原始 mousemove 记录值，elementFromPoint 自动考虑当前滚动偏移。
-
性能优化建议：对高频 scroll 事件添加防抖（如 requestAnimationFrame 或 setTimeout），避免重复计算：
let scrollTimer; $parent.on('scroll', () => { clearTimeout(scrollTimer); scrollTimer = setTimeout(() => highlightUnderCursor($parent), 16); }); - CSS 优先级：确保 .child_div.active 的样式权重足够覆盖 :hover（如使用 !important 或更高特异性选择器）。
- 移动端兼容性：此方案依赖鼠标坐标，不适用于纯触摸设备；如需全平台支持，应补充 touchmove 事件监听与坐标映射逻辑。
✅ 最终效果
- 滚轮滚动时，若光标静止在某子元素上方，该元素将实时获得 .active 类并显示白色背景；
- 移动鼠标时，原生 mouseenter/leave 仍生效，无缝接管状态；
- 无侵入式 DOM 操作，不破坏原有事件流，符合渐进增强原则。
该方案本质是用 JavaScript 补齐浏览器在滚动场景下缺失的“悬停重校准”能力，既尊重原生行为，又填补交互空白，是解决此类问题的生产级实践。
