用 getBoundingClientRect() 获取元素视口坐标，结合 clientX/Y 计算鼠标到四边距离并取最小值确定高亮方向，通过 CSS 变量动态控制 border 边框样式，配合 mouseenter/mouseleave 避免冒泡干扰。
鼠标移入时如何用 getBoundingClientRect() 获取元素位置
边框高亮效果的核心是知道鼠标相对于目标元素的方位（上/下/左/右），这不能靠 event.offsetX 或 clientX 单独判断，必须结合元素自身的几何信息。调用 getBoundingClientRect() 是最可靠方式，它返回包含 top、right、bottom、left、width、height 的对象，且值均为相对于视口的像素数。
注意：该方法返回的是只读对象，且每次调用都会触发重排（layout），高频调用（如 mousemove）时建议缓存结果或节流；若元素有 transform，getBoundingClientRect() 返回的是变换后的位置，符合预期。
- 在
mouseenter时调用一次并缓存，避免在mousemove中重复计算 - 不要用
offsetTop/offsetLeft，它们不包含滚动偏移和 CSS transform 影响 - 若目标元素是
position: fixed，getBoundingClientRect()依然准确，无需额外修正
如何用 CSS 变量动态控制高亮边框方向与宽度
CSS 变量（--highlight-side、--highlight-width）是解耦 JS 逻辑与样式的关键。边框高亮不需要操作 class 切换或内联 style，只需更新变量值，CSS 就能响应式渲染对应方向的 border。
关键技巧在于：用单个 border 属性无法只高亮一边，所以采用 border-top / border-right 等独立属性 + transition 实现平滑动画；同时将所有边初始设为 transparent，仅目标边设为颜色 + 宽度。
立即学习“前端免费学习笔记（深入）”；
- 定义基础样式：
border: 2px solid transparent;，再单独覆盖某一边，例如border-top: var(--highlight-width, 0) solid #007bff; - 用
transition: border-color 0.2s, border-width 0.2s;让高亮进出更自然 - JS 中设置变量时，务必用
element.style.setProperty('--highlight-width', '3px');，不能写成style.width这类错误属性名
如何根据鼠标坐标判断应高亮哪一边
判断逻辑本质是「比较鼠标距四边的距离」：计算鼠标到上、右、下、左边界的距离，取最小值对应的方向。但要注意，直接比 clientY - rect.top 会受滚动影响——实际应统一用 event.clientY 与 rect.top（二者同为视口坐标），无需手动加 window.scrollY。
一个常见误区是认为“靠近左边就高亮左边”，其实当鼠标在元素左上方区域时，可能到左边距离是 15px，到上边是 8px，此时应高亮上边。所以必须四个方向都算，再取最小。
- 计算公式示例：
const distTop = e.clientY - rect.top;，const distRight = rect.right - e.clientX;，以此类推 - 使用
Math.min()找出最小距离，再用switch或对象映射决定--highlight-side值（如'top'、'right'） - 为防抖动，可加一个阈值（如
2px），当最小距离小于该值时才触发高亮，避免边缘反复切换
为什么用 mouseenter/mouseleave 而非 mouseover/mouseout
mouseenter 和 mouseleave 不会冒泡，且只在真正进入/离开绑定元素边界时触发；而 mouseover 在子元素间移动也会触发，导致频繁重置高亮状态甚至错乱。
比如目标元素内部有图标或文字，用 mouseover 会让鼠标从文字移到空白处时误发 mouseout，高亮立刻消失——这不是想要的行为。
- 绑定事件时只监听
mouseenter（初始化位置和变量）、mousemove（更新方向）、mouseleave（清空变量或设回默认） - 在
mouseleave中执行el.style.removeProperty('--highlight-side');，让 CSS 回退到初始透明边框 - 不要在
mousemove里做 DOM 查询或复杂计算，所有 rect、尺寸、方向映射都应在mouseenter阶段准备好
边框高亮看似简单，但真实项目中容易在坐标系混淆、事件冒泡、重排性能、CSS 变量作用域这几个点上卡住；尤其是把 clientX/Y 和 offsetLeft/Top 混用，或者忘了 getBoundingClientRect() 已含滚动偏移，会导致高亮位置严重偏移。
