悬停时字体颜色不会改变答案

【问题标题】：Font color won't change on hover悬停时字体颜色不会改变
【发布时间】：2018-03-16 06:34:42
【问题描述】：

我有一个如下所示的登录按钮：

现在当我将鼠标悬停在它上面时，它看起来像这样：

当我将鼠标悬停在文本上时，我无法将其设为白色

我的代码：

.button {
	   border: 0px solid #011f4b;
	   background: #011f4b;
	   padding: 3px 21px;
	   -webkit-border-radius: 16px;
	   -moz-border-radius: 16px;
	   border-radius: 16px;
	   color: #ffffff;
	   font-size: 12px;
	   font-family: Questrial;
	   text-decoration: none;
	   vertical-align: middle;
	   letter-spacing: 2px;
    }
   
   .button:hover {
	   border: 0px solid #1292e1;
	   background: #1292e1;
	   color: white;
    }
   
   .button:active {
	   background: #1292e1;
	   color: #fff;
    }

&lt;a href='#' class='button'&gt;Login&lt;/a&gt;

【问题讨论】：

你把两种颜色都改成白色
@TemaniAfif 你是什么意思？
我的意思是你把白色和它是白色的......你的代码中的问题在哪里？
使用您当前的 CSS，文本始终是白色的。
@stybl 是的，文本应该始终是白色的，但是当我将鼠标悬停在它上面时，它会改变

标签： html css text fonts colors

【解决方案1】：

尝试添加！ !important 如果有另一个 CSS 代码将悬停时的颜色设置为另一个，则会强制颜色为白色

【讨论】：

【解决方案2】：

尝试在您的选择器中添加 a 标签，以避免与您网站中的其他 CSS 冲突：

a.button {
  border: 0px solid #011f4b;
  background: #011f4b;
  padding: 3px 21px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  color: #ffffff;
  font-size: 12px;
  font-family: Questrial;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 2px;
}

a.button:hover {
  border: 0px solid #1292e1;
  background: #1292e1;
  color: white;
}

a.button:active {
  background: #1292e1;
  color: #fff;
}

&lt;a href='#' class='button'&gt;Login&lt;/a&gt;

您也可以考虑使用 !important 来强制保持白色，如下所示：

a.button:hover {
      border: 0px solid #1292e1;
      background: #1292e1;
      color: white!important;
    }

【讨论】：

你可以考虑在悬停部分添加!important
发布它作为答案我会检查你