添加:before伪元素修复hover抖动后链接失效，pointer-events:none恢复抖动求解

问题根源在于：之前用伪元素覆盖整个卡片来扩展hover范围，虽然解决了抖动，但挡住了链接；而去掉伪元素的指针事件后，hover触发范围又缩回卡片本身，导致上移后鼠标离开触发区域，循环抖动。

正确的思路是把hover触发区域和卡片内容层分开：让伪元素只在卡片下方扩展hover范围，既保证卡片上移时鼠标仍在触发区域内，又不遮挡上方的链接内容。

修改后的关键CSS代码：

.servercard {
  position: relative;
  /* 保留你原有的背景、padding、过渡等样式 */
  transition: transform 0.2s ease;
}

.servercard:hover {
  transform: translateY(-8px);
}

.servercard:before {
  content: '';
  position: absolute;
  /* 伪元素定位在卡片底部下方，扩展hover触发范围 */
  bottom: -20px;
  left: 0;
  width: 100%;
  /* 高度要大于卡片上移的距离，确保鼠标不会脱离hover区域 */
  height: 30px;
  /* 把伪元素放在卡片内容下方，完全不遮挡链接 */
  z-index: -1;
}

为什么这样有效： #

• 伪元素在卡片底部额外扩展了20px的hover触发区域，当卡片上移8px时，鼠标即使停留在原底部位置，依然处于伪元素的hover范围内，不会触发mouseout事件，彻底解决抖动问题。
• 伪元素的z-index: -1让它处于卡片内容的下方，完全不会遮挡链接，所以链接可以正常点击，不需要添加pointer-events: none;。
• 伪元素依然能正常捕获hover事件，保持卡片的悬浮效果稳定。

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