CODEWITHSUNDEEP
htmlcssinheritance
Joolian
Joolian

Reputation: 71

CSS – link:hover color inheritance issue

I am really confused by what is happening here. I am wondering why the link is white when the cursor is within the button but NOT directly on the link? I want it to be red while cursor is within button boundaries.
I think that this happening is because at that point, the page is inheriting from the declared .links:a color value, but I am wondering how do I get it to override that? The .links:hover doesn't seem to transfer inheritance to .links a:hover (?)
Any help would be greatly appreciated!!

.links a{
  color:white;
  text-decoration:none;
}
.links:hover{
  background-color:white;
  color:red;
}

.links a:hover{
  background-color:white;
  color:red;
}

https://jsfiddle.net/3dujymLk/1/

Upvotes: 0

Views: 969

Answers (1)

skyline3000
skyline3000

Reputation: 7913

Your rules are working exactly the way you wrote them. If you want the a text to be red while hovering over the entire div, you need a rule for that. Add something like this:

.links:hover a {
    color: red;
}

If it isn't obvious, this controls the text-color of the link while hovering over the div.

Upvotes: 2

Related Questions