React项目中CSS :hover伪类对NavLink组件样式不生效问题求助

问题原因 #

你CSS代码中:hover伪类前的符号使用了非英文半角冒号的特殊字符，浏览器无法识别该选择器，直接忽略了对应样式规则，导致hover效果不生效。

你现有CSS中错误的代码行如下：

.Navigation-signIn։hover {
  background-color: #ffffff;
}

其中Navigation-signIn与hover之间的։不属于CSS规范要求的英文半角冒号:，属于无效字符。

修复方案 #

将错误符号替换为英文半角冒号即可，修改后的完整CSS代码如下：

.Navigation-signIn {
  background-color: #c8db5a;
}

.Navigation-signIn:hover {
  background-color: #ffffff;
}

同类问题扩展排查 #

如果修改后仍存在hover样式不生效的问题，可以按以下方向排查：

• 检查当前选择器的优先级，是否有其他更高优先级的样式覆盖了hover规则
• 检查对应元素是否被其他层级更高的元素遮挡，导致鼠标 hover 事件没有触发到目标元素上
• 确认CSS文件已经正确引入到你的项目中
• 检查是否有其他JS逻辑修改了元素的行内样式，行内样式优先级高于外部CSS的类选择器样式

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