TailwindCSS peer-hover动画遭鼠标干扰闪烁问题排查

问题原因 #

当右侧元素从左侧滑入时，会覆盖在左侧的peer元素上方，此时鼠标实际悬停在右侧元素上，导致peer-hover状态丢失，右侧元素随即滑回原位；鼠标重新落在左侧peer上后又触发hover，如此循环就造成了闪烁跳动。

解决方案 #

将hover触发逻辑绑定到外层容器，而非左侧元素，这样只要鼠标在容器范围内，就能持续保持hover状态，避免触发状态反复切换。

方法一：使用Tailwind Group类（推荐）

<div className="relative h-[400px] w-[300px] group">
  <div className="absolute w-full h-full" />
  <div className="absolute w-full h-full left-[100%] group-hover:left-[0%] transition-all duration-300" />
</div>

方法二：直接绑定外层hover（适合简单场景）

<div className="relative h-[400px] w-[300px] hover > div:nth-child(2):left-[0%]">
  <div className="absolute w-full h-full" />
  <div className="absolute w-full h-full left-[100%] transition-all duration-300" />
</div>

补充说明 #

• 添加transition-all duration-300可以让滑入动画更平滑，匹配参考效果
• 如果右侧元素仅用于展示、无需交互，也可以给它添加pointer-events-none，让鼠标事件穿透到下方左侧元素，同样能解决闪烁，但这种方法不支持右侧元素的点击操作

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