Hover Transition在光标移动时异常触发的原因咨询

你遇到的这个“光标在元素内部移动也反复触发过渡”的问题，核心原因是hover目标的丢失与重新触发循环，结合你的代码具体拆解如下：

为什么会出现这种现象？ #

你的代码逻辑是：当鼠标悬停在.img元素上时，通过兄弟选择器~让.info向上位移150px，进入.wrapper的可视区域（因为.wrapper设置了overflow:hidden，初始.info是被隐藏在容器外的）。

但这里有个关键细节：transform是视觉层面的位移，不改变元素的实际布局位置——也就是说，.info移上来之后，在视觉上覆盖住了.img，但它的实际点击区域还是在原来的下方位置。而.img的hover状态，只有当鼠标真正在它的布局区域上时才会保持。

当你在.img上移动鼠标，一旦光标移到视觉上.info覆盖的区域，浏览器会认为鼠标现在不在.img上了（因为.info在视觉层级更高），于是.img的hover状态消失，.info会恢复原位；这时候鼠标又回到了.img的布局区域，hover再次触发，.info又移上来……如此反复循环，就造成了你看到的“光标动一下就触发过渡”的现象。

两种简单的解决方案 #

方案1：把hover绑定到父容器上

既然问题出在hover目标的切换上，那我们直接把hover事件绑定到父元素.wrapper上，只要鼠标在容器内部，不管是在.img还是.info上，hover状态都会保持，自然不会出现反复触发的情况。

修改后的CSS代码：

.wrapper { height: 150px; overflow: hidden; display: flex; width: 150px; flex-wrap: wrap; }
.img { width: 100%; height: 150px; background-color: tomato; color: black; }
.info { height: 150px; width: 100%; background-color: skyblue; transform: translateY(0); transition: all 1s; }
/* 把hover目标改成父容器 */
.wrapper:hover .info { transform: translateY(-150px); }

方案2：让.info不接收鼠标事件

如果你的.info只是纯展示内容，不需要交互，可以给它添加pointer-events: none属性，这样它会忽略所有鼠标事件，即使视觉上覆盖了.img，鼠标事件也会穿透到下面的.img，保持hover状态。

修改后的CSS代码：

.wrapper { height: 150px; overflow: hidden; display: flex; width: 150px; flex-wrap: wrap; }
.img { width: 100%; height: 150px; background-color: tomato; color: black; }
.info { 
  height: 150px; 
  width: 100%; 
  background-color: skyblue; 
  transform: translateY(0); 
  transition: all 1s; 
  pointer-events: none; /* 禁止接收鼠标事件 */
}
.img:hover~.info { transform: translateY(-150px); }

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