悬停时字体颜色不会改变

Question

我有这个登录按钮，如下所示：

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

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

我的代码：

.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;
    }

<a href='#' class='button'>Login</a>

Answer 1

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

Answer 2

尝试在选择器中添加 a 标记，以避免与您网站中的其他CSS相混淆：

＆＃13;

＆＃13;

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;
}

＆＃13;

<a href='#' class='button'>Login</a>

＆＃13;

＆＃13;

＆＃13;

你也可以考虑！important 强制保持白色这样的颜色：

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