Why hover color does not follow a:hover in a div?

Question

I have a link in a class like this:

<div class="brand">
          <a href="/">amazona</a>
</div>

And I changed link color and link:hover color like this:

a {
  color: green;
  text-decoration: none;
}
a:hover {
  color: red;
}

It works perfectly. But when I change the link color in the div like this:

.brand a{
color:brown;
}

The link color is brown even I move the mouse over it. I expect the hover color to be red. Why does it happen? and how can I fix it?

score 2 · Answer 1 · answered Dec 29 '19 at 07:28

2

To solve this problem first you need to understand CSS specificity (visit: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). And if you are using .brand a CSS is becoming more specific, hence on a:hover also you need to add more specific CSS like .brand a:hover

a {
  color: green;
  text-decoration: none;
}
a:hover {
  color: red;
}
.brand a{
  color:brown;
  text-decoration: none;
}
.brand a:hover{
  color:red;
}

<div class="brand">
          <a href="/">amazona</a>
</div>

answered Dec 29 '19 at 07:28

Sarvesh Mahajan

810
7
16

Thanks for your answer. It is the perfect one. – basir Dec 29 '19 at 07:46
1

@basir , appreciate if you can vote, if it solves your problem, thanks – Sarvesh Mahajan Dec 29 '19 at 07:50

score 1 · Answer 2 · answered Dec 29 '19 at 07:10

1

Because you specified every single link in a .brand div has the colour brown. You can do

.brand a:hover {
color: red;
}

This will work :)

answered Dec 29 '19 at 07:10

Martin Najjar

84
7

score 1 · Accepted Answer · answered Dec 29 '19 at 07:55

I am going to take a shot at answering this because I feel it can be better clarified. As mentioned above, a deeper understanding of the CSS language is needed, specifically a deeper understanding of CSS selectors, and how they work.
CSS implements the code you write with in your style-sheet according to order, what was write first is computed first, what was written last is computed last, therefore; if you write:

.some-txt{
    color: red;
}

.some-txt{
    color: blue;
}

.some-txt{
    color: razzle-dazzle-purple;
}

then the text with class some-txt is going to be the color, 'razzle-dazzle-puple'. This is becuase razzle-dazzle-puple was the last color in the order of assignment given. In your code you gave the color brown to a after red, canceling your previous assignment. To fix this you either be more specific with your selectors like so:

.brand a:hover {
     color: red;
}

or just simply try moving things around, I tested your code and I think what you were looking for is this:

        a {
            color: green;
            text-decoration: none;
        }

        a {
            color: green;
            text-decoration: none;
        }


        .brand a {
            color: brown;
        } 

        a:hover {
            color: red;
        }

remember when you add hover to a property, you are adding it to the property, so when you change that property, after you already assigned it a value, you are change the whole property. I hope this makes sense, some things are hard to explain, obviously the best way to understand something is by playing with it.

score -2 · Answer 4 · edited Dec 29 '19 at 08:07

-2

.brand a style is overriding the a:hover style. if you exchange the order of the two styles in your style-sheet it will work.

edited Dec 29 '19 at 08:07

Aft3rL1f3

492
3
22

answered Dec 29 '19 at 07:01

Shirish Maharjan

472
2
15

this is not because of order, it is related to CSS specificity – Sarvesh Mahajan Dec 29 '19 at 07:32

Why hover color does not follow a:hover in a div?

4 Answers4