懸停時字體顏色不會改變

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

嘗試在選擇器中添加一個標記，以避免與您站點中可能存在的其他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; } 

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

您也可以考慮！重要的是強制保持白色，如下所示：

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