CODEWITHSUNDEEP
htmlcsshover
Burcak
Burcak

Reputation: 82

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

Upvotes: 0

Views: 186

Answers (3)

Mohammad Usman
Mohammad Usman

Reputation: 39382

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

Upvotes: 3

Mittal Patel
Mittal Patel

Reputation: 2762

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

Upvotes: 0

andyb
andyb

Reputation: 43823

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?

Upvotes: 1

Related Questions