Changing Hover Color Css

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-tr

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

Solution 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

#sectionheader:hover {
  background: red;
}

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

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