Changing Hover Color CSS

Question

In diesem Website gibt es 4 Registerkarten auf der Homepage. Wie kann ich die grün-bläuliche Farbe ändern, wenn ich die Maus auf einen Tab halte?

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

In folgenden CSS-Regel am Ende Ihrer css Datei background-color zu ändern. important wird benötigt, da es bereits in Ihrem css verwendet wird. Wir müssen es also erneut verwenden, um das vorherige Styling zu überschreiben.

Hinweis: Verwendung von !important gilt als schlechte Praxis und es sollte so viel wie möglich vermieden werden.

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

Answer 2

Das Problem ist, dass #service .header ist more specific als .header:hover so die spezifischere Regel immer die :hover überschrieben wird. Unter CSS: Specificity Wars erfahren Sie, wie einige der Selektoren sich gegenseitig übersteuern.

Eine Lösung könnte #section header:hover als Wähler für die Schwebe dynamischen Pseudoklasse

#section header:hover { 
    background: red; 
} 

Hinweis zu verwenden sein: Hinzufügen !important ist schlechte Praxis betrachtet - What are the implications of using "!important" in CSS?

Answer 3

sehen Sie unten CSS verwenden können, die sie ändern schweben Farbe. Wie bei allen für die Haupt div ist mit Klasse „Box“ und lichte Weite mit der Klasse „header“

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