CSS按钮hover动画结束后无法点击的问题求助

嘿，这个问题我之前也踩过坑！核心原因出在你的:before伪元素上——它是绝对定位的，动画结束后会一直停留在按钮上方，把按钮的点击区域完全挡住了，你点的时候其实是点在了伪元素上，而非按钮本身。

给你几个实用的解决方案，按优先级推荐：

方案1：给伪元素添加pointer-events: none #

这是最直接快速的修复方式，让伪元素忽略所有鼠标事件，点击会直接穿透到下面的按钮。修改你的CSS代码：

.chooseFileBtn:before {
  content:'';
  position:absolute;
  top:34.1%;
  left:41.1%;
  height:5.6%;
  width:0px;
  border-radius: 8px;
  background:rgba(255,255,255,0.3);
  transition: all 2s ease;
  pointer-events: none; /* 新增这一行 */
}

方案2：修正伪元素的定位范围（更推荐的长期方案） #

你现在用的绝对定位是相对于整个页面的（因为按钮没设置position: relative），这不仅容易在不同屏幕尺寸下出现位置偏移，还可能让伪元素超出按钮范围遮挡其他元素。建议调整成相对于按钮本身定位：

.chooseFileBtn {
  margin-top:180%;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #E55300;
  transition: all 500ms ease;
  position: relative; /* 让伪元素以按钮为定位基准 */
}
.chooseFileBtn:before {
  content:'';
  position:absolute;
  top: 0;
  left: 0;
  height: 100%; /* 完全匹配按钮高度 */
  width:0px;
  border-radius: 8px;
  background:rgba(255,255,255,0.3);
  transition: all 2s ease;
  pointer-events: none; /* 防止遮挡点击 */
}
.chooseFileBtn:hover:before {
  width:100%; /* 动画时填充整个按钮宽度 */
}

调整后，伪元素的动画范围完全贴合按钮，不会出现位置偏移，同时彻底解决了点击被遮挡的问题。

问题根源再梳理下 #

绝对定位的元素会脱离正常文档流，默认会拦截所在区域的所有鼠标事件。你的动画结束后，伪元素宽度从0变为8.72%，刚好覆盖在按钮的点击区域上方，导致按钮接收不到点击事件——哪怕你再次hover，也只是触发了动画状态，点击还是会被伪元素拦截。

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