CSS hover时文本颜色不生效问题求助（附代码示例）

问题原因 #

你猜的没错，全局a标签的color: var(--color-text)优先级更高，直接覆盖了你设置的hover状态文本颜色——要么是.header__logo__title本身就是a标签，全局a的样式优先级和它持平甚至更高；要么它是a标签的父元素，文本实际是a标签的内容，父元素的color样式影响不到子元素a的文本颜色。

具体解决办法 #

根据你的HTML结构分两种情况处理：

情况1：.header__logo__title本身就是a标签 #

要么提升hover样式的优先级，要么直接明确指定a标签的hover状态：

/* 方法1：增加选择器特异性（推荐） */
.header__logo__title:hover {
  color: #你的目标颜色; /* 比如#ff0000 */
  font-size: 20px;
  background-color: #你的背景色;
}

/* 或者更明确地指定a标签 */
a.header__logo__title:hover {
  color: #你的目标颜色;
  font-size: 20px;
  background-color: #你的背景色;
}

情况2：.header__logo__title是a标签的父容器 #

需要直接给子元素a设置hover状态：

/* 控制文本颜色 */
.header__logo__title:hover a {
  color: #你的目标颜色;
}
/* 控制父容器的字号和背景色 */
.header__logo__title:hover {
  font-size: 20px;
  background-color: #你的背景色;
}

调试小技巧 #

用浏览器F12打开开发者工具，选中目标元素后看「样式」面板，找到color属性——如果它被划掉，旁边会显示覆盖它的样式来源，能快速确认问题根源。另外尽量别用!important，优先靠增加选择器层级来提升优先级，避免后续样式混乱。

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