Изменение цвета наведения CSS

Question

В этом Website есть 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 является 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?

Answer 3

Вы можете использовать ниже CSS, чтобы изменить цвет зависания. Что же касается всего для основного DIV находится с классом «коробками» и внутренней шириной с классом «заголовком»

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