更改懸停顏色CSS

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

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

來源

2016-05-17 Burcak

用'：懸停{顏色：#XXXXXX;}' – LoicTheAztec

這個問題是缺乏的一個完整的例子問題和一旦你改變了現場，這個問題變得毫無用處。 – andyb

[HTML/CSS - 懸停鏈接顏色]的可能重複（http://stackoverflow.com/questions/15458313/html-css-hover-link-color） –

加在你css文件的末尾以下CSS規則改變background-color。 important是必需的，因爲它已在您的css中使用。所以我們需要再次使用它來覆蓋以前的樣式。

注意：使用!important被認爲是不好的做法，應儘量避免使用它。

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

來源

2016-05-17 08:13:44

編號'！重要的'不是這裏的答案，並且被認爲是不好的做法。問題是'#service .header比'.header：hover'更具體。一種替代解決方案可能是使用'#section header：hover'作爲懸停選擇器。我建議閱讀關於[CSS特異性]（https://developer.mozilla.org/en/docs/Web/CSS/Specificity） – andyb

@andyb正是我要指出的。我認爲你應該回答一下關於'CSS特定性'的問題，因爲如果在'CSS'的某些屬性沒有改變時他總是使用'！important'，那麼OP可能在不好的實踐中循環。 –

@ Error404確定，完成。我希望我的評論足以提示編輯的回答......您的消息也突出顯示了我在我的評論中搞砸了我的代碼。我想這個問題無論如何都會被刪除，因爲這個問題沒有持久的例子。 OP已經改變了現場！ – andyb

的問題是，#service .header是more specific比.header:hover所以更具體的規則總是重寫:hover。請參閱CSS: Specificity Wars，瞭解部分選擇器如何組合覆蓋對方。

一種解決方案可能是使用#section header:hover作爲選擇的懸停動態僞類

#section header:hover { 
    background: red; 
}

注：添加!important被認爲是不好的做法 - 看到What are the implications of using "!important" in CSS?

來源

2016-05-17 09:14:58 andyb

您可以使用以下CSS來改變懸停顏色。至於所有的主要的div是與類「盒子」和內部寬度與類「報頭」

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

來源

2016-05-17 09:18:00 Mittal

更改懸停顏色CSS

回答

相關問題