CSS按钮悬停动画失效：左侧滑入效果及光标无响应问题

问题根源 #

• 按钮.slide设置了z-index: -1，导致按钮层级低于伪元素，鼠标无法触发按钮的hover/focus状态
• 伪元素的transition属性语法错误，多了个逗号，导致过渡动画不生效
• 之前hover时设scaleX(2)才显示，是因为按钮层级问题导致伪元素被遮挡，修复层级后scaleX(1)就能正常铺满按钮

修复后的完整代码 #

CSS

/* 给按钮设置相对定位，让伪元素基于它定位 */
button.slide {
  position: relative;
  transition: color 300ms ease-in-out;
  /* 移除z-index: -1，保证按钮能被鼠标触发交互 */
}

button.slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--accent-color);
  /* 修正transition语法，去掉多余逗号 */
  transition: transform 300ms ease-in-out;
  transform: scaleX(0);
  transform-origin: left;
}

button.slide:hover::before,
button.slide:focus::before {
  /* 使用scaleX(1)让伪元素刚好铺满按钮 */
  transform: scaleX(1);
}

button.slide:hover,
button.slide:focus {
  color: white;
}

HTML

<button class="slide">Button</button>

关键修复点说明 #

• 添加position: relative到按钮：确保伪元素的绝对定位是相对于按钮本身，而非页面
• 移除按钮的z-index: -1：恢复按钮的正常层级，让鼠标能触发hover/focus事件
• 修正伪元素的transition语法：保证过渡动画正常执行
• hover时用scaleX(1)：伪元素从左侧滑入后刚好覆盖整个按钮，避免过度缩放

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