更改懸停顏色CSS

Question

在此網站的主頁上有4個選項卡。 將鼠標懸停在選項卡上時，如何更改綠藍色？

a {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
a {
    color: #00e1b6;
    line-height: inherit;
    text-decoration: none;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

Answer 1

在css文件的末尾添加以下css規則以更改background-color 。 important是必需的，因為它已在您的css 。 因此，我們需要再次使用它來覆蓋以前的樣式。

注意：使用!important被認為是不好的做法，應盡可能避免使用。

.header:hover {
    background: #7cedd7 !important;
}

Answer 2

問題是， #service .header是更具體的比.header:hover ，因此更具體的規則總是重寫:hover 。 有關某些選擇器如何組合以相互替代的信息，請參見CSS：Specificity Wars 。

一種解決方案是使用#section header:hover作為懸停動態偽類的選擇器

#section header:hover {
  background: red;
}

注意：添加!important被認為是不好的做法-請參閱在CSS中使用“！important”的含義是什么？

Answer 3

您可以使用下面的CSS更改懸停顏色。 至於所有的主要股利是類“框”和內部寬度類“頭”

.box. header:hover {
    background: #7cedd7;
}