CSS :hover 无法获取鼠标进入方向，必须用 JavaScript 的 mouseenter 事件结合 getBoundingClientRect() 计算鼠标相对元素边界的偏移量来判断方向，并通过 CSS 自定义属性传递给样式系统实现方向感知动画。
hover 本身无法直接获取进入方向，必须配合 JavaScript
纯 CSS 的 :hover 只能判断“是否悬停”，不暴露鼠标坐标或移动轨迹。所谓“用 hover 配合自定义变量”只能做状态标记，不能推导方向。真正要判断从上/下/左/右进入，得靠 mouseenter 和 mouseleave 事件 + 元素边界计算。
用 getBoundingClientRect() 算鼠标相对元素中心的偏移
核心思路：在 mouseenter 触发时，取鼠标位置 event.clientX/Y，再对比目标元素的 getBoundingClientRect() 返回的 top/right/bottom/left，就能算出鼠标是从哪边靠近的。
关键逻辑是看鼠标落点与元素中心点的相对象限：
- 若
clientX - rect.left → 更靠近左边 - 若
clientY - rect.top → 更靠近上边 - 组合判断后，赋值给 CSS 自定义属性，比如
style.setProperty('--enter-dir', 'top')
这样后续就可以在 CSS 中用 transition 或 @keyframes 做方向感知动画。
立即学习“前端免费学习笔记（深入）”；
CSS 里用 var(--enter-dir) 做方向响应要小心作用域和时机
自定义属性必须写在被 hover 的元素上（或其父级），且 JS 赋值后要等样式重新计算才生效。常见坑：
- 在
mouseenter里立刻读getComputedStyle(el).getPropertyValue('--enter-dir')读不到新值——它还没参与渲染流程 - 如果用
transition动画依赖该变量，得确保变量变化能触发重绘，比如配合transform或opacity - 不要在伪元素里直接用
var(--enter-dir)控制content，CSS 不支持根据变量值切换字符串
一个稳妥做法：JS 设置 --enter-dir: top 后，在 CSS 里用属性选择器或 class 切换驱动动画，比如：
div[data-enter="top"]::before {
transform: translateY(-20px);
}移动端没有 mouseenter，得降级或换方案
触摸设备不会触发 mouseenter，touchstart 也不带坐标语义。强行适配容易误判。实际项目中更推荐：
- 只在
matchMedia('(hover: hover)')为真时启用方向检测逻辑 - 对触屏用户统一用淡入、缩放等无方向依赖的 enter 动画
- 避免把方向判断作为功能必要条件，仅作视觉增强
方向识别本身有精度问题：鼠标斜着快速划过角落时，结果可能抖动。加个 5–10px 的容差阈值比单纯比中心点更稳。
