CSS按钮Hover时文字颜色不生效问题排查与解决

核心问题 #

1. hover触发逻辑错误：你写的.cards-carousel .btn a:hover仅在鼠标直接悬停在<a>文字上时才触发颜色变化，但实际需求是鼠标悬停整个按钮容器时就改变文字颜色。
2. 可选优化点：.btn:before伪元素hover时会铺满按钮，若不调整层级，可能导致文字交互感知受影响（虽不是文字不变色的直接原因，但建议优化）。

修复步骤 #

1. 修正hover选择器 #

将原代码中：

.cards-carousel .btn a:hover {
  color: #fff !important;
}

替换为：

.cards-carousel .btn:hover a {
  color: #fff;
}

该选择器表示当.btn容器被hover时，内部<a>标签改变颜色，完全匹配你的交互需求，同时可移除!important，通过选择器优先级控制更合理。

2. 确保文字层级高于背景伪元素（推荐） #

给<a>标签添加相对定位与层级设置，避免伪元素遮挡文字：

.cards-carousel .links a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative; /* 新增 */
  z-index: 1; /* 新增，确保文字在伪元素上层 */
}

3. 统一链接颜色规则（可选） #

补充默认状态的链接颜色，避免浏览器默认样式干扰：

.cards-carousel .links a,
.cards-carousel .links a:visited {
  color: #000;
}

完整修复后的CSS代码 #

.cards-carousel .links a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.cards-carousel .links a,
.cards-carousel .links a:visited {
  color: #000;
}

.cards-carousel .links {
  position: relative;
  display: block;
  background: #d4af50;
  overflow: hidden;
  transition: 1s all ease;
}

.cards-carousel .btn {
  position: relative;
  display: inline-block;
  padding: 0.9rem 1.2rem;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s ease;
}

.cards-carousel .btn:hover a {
  color: #fff;
}

.cards-carousel .btn:before {
  background-color: #161443;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  width: 100%;
  height: 0;
}

.cards-carousel .btn:hover::before {
  height: 100%;
}

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