Changing Hover Color CSS

Question

In this Website there are 4 tabs at the home page. How can i change the green-blueish color when i hover the mouse on a tab?

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

Add following css rule at the end of your css file to change background-color . important is needed because it is already being used in your css . So we need to use it again to override previous styling.

Note: use of !important is considered bad practice and it should be avoided as much as we can.

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

Answer 2

The problem is that #service .header is more specific than .header:hover so the more specific rule is always overriding the :hover . See CSS: Specificity Wars on how some of the selectors combine to override each other.

One solution could be to use #section header:hover as the selector for the hover dynamic pseudo class

#section header:hover {
  background: red;
}

Note: adding !important is considered bad practice - see What are the implications of using "!important" in CSS?

Answer 3

You can use below CSS to change the hover color. As for all for the main div is with class "box" and inner width with the class "header"

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