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

This question is lacking a complete example of the problem and once you have changed the live site, this question becomes useless. — andyb, May 17 '16 at 08:57
Possible duplicate of [HTML / CSS - Hover Link Color](http://stackoverflow.com/questions/15458313/html-css-hover-link-color) — Creative Enemy, May 17 '16 at 09:24

Mohammad Usman · Accepted Answer · 2016-05-17T10:08:31.420

3

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

edited May 17 '16 at 10:08

answered May 17 '16 at 08:13

Mohammad Usman

37,952
20
92
95

4

No. `!important` is not the answer here, and is considered bad practice. The problem is that `#service .header is more specific than `.header:hover`. One alternate solution could be to use `#section header:hover` as the selector for the hover. I suggest reading about [CSS specificity](https://developer.mozilla.org/en/docs/Web/CSS/Specificity) – andyb May 17 '16 at 09:00
@andyb Exactly what I was going to point out. I think you should put an answer about `CSS specifity` because the OP can loop in bad practices if he always use `!important` when some property of `CSS` does not change. – Francisco Romero May 17 '16 at 09:04
@Error404 ok, done. I was hoping that my comment would be enough to prompt an answer edit... also your message highlighted that I screwed up my code escaping in my comment. I assume this question will be deleted anyway since since there is no lasting example of the problem. The OP has already changed the live site! – andyb May 17 '16 at 09:17
yes, i agree `important` is bad to use. I suggested it only because it was already being used in css written by previous developer – Mohammad Usman May 17 '16 at 10:03

score 1 · Answer 2 · edited May 23 '17 at 10:28

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?

score 0 · Answer 3 · answered May 17 '16 at 09:18

0

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

answered May 17 '16 at 09:18

Mittal Patel

2,732
14
23

Changing Hover Color CSS

3 Answers3

Linked