React项目中a.btn类的CSS hover伪类失效问题求助

你的问题出在hover选择器的空格上，具体修正和注意事项如下：

1. 修正hover选择器的语法错误 #

你写的 a.btn :hover 里，.btn 和 :hover 之间的空格是后代选择器语法，它会匹配a.btn内部子元素的hover状态，而非a.btn本身的hover状态。

正确写法是去掉空格，直接写：

a.btn:hover {
  transform: scale(1.2);
}

2. 确保transform属性生效 #

Link组件最终渲染为<a>标签，而<a>默认是行内元素，transform属性对行内元素不生效。需要在基础样式里给a.btn添加块级/行内块级显示属性：

a.btn {
  background-color: var(--lighter-hover-color);
  color: white;
  padding: 10px 25px;
  margin: 15px 0;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid var(--hover-color);
  text-decoration: none;
  /* 添加这行，让transform生效 */
  display: inline-block;
}

a.btn:hover {
  transform: scale(1.2);
}

这样修改后，hover时的缩放效果就能正常触发了。

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