CSS: hover over block to change text color and link
I have a block (div)
and which contains text with links. When I hover over this block, I need to change the color of the text (also the color of the links). " div:hover
" - this text color changes, but the link color remains unchanged.
Complete code:
CSS
a {
color: #336699;
}
div {
height: 50px;
background-color: #FFF;
color: red;
}
div a {
color: red;
}
div:hover {
background-color: #336699;
color: #FFF;
}
HTML:
<div>
text test <a href="#">URL</a> text
</div>
You need to target the link to override its color.
Like this:
div:hover a {
color: #FFF;
}
FIDDLE
Explanation:
You originally set the link color to red with:
div a {
color: red;
}
When you add a class div:hover{}
- although this is a more specific rule than div a
- it doesn't target the link itself - just the link container.
So, if there was no rule that set the color of the link, then the class div:hover{}
would fire up and color the white link on the hover - via inheritance.
However, since there is a rule that paints your links red - you need to target the links themselves on hoverdiv:hover a
Try the following:
div:hover, div:hover a{
background-color: #336699;
color: #FFF;
}
violin
You almost understood everything. If you want a link to change when the div hovers, you should do this:
div:hover a {
color: red;
}
fiddle here: http://jsbin.com/bipoq/1/
try it
<style>
a{
color: #336699;
}
div{
height: 50px;
background-color: #FFF;
color: red;
}
div a{
color: red;
}
div:hover{
background-color: #336699;
color: #FFF;
}
div:hover a
{
color: #FFF;
}
</style>
<div>
text test <a href="#">URL</a> text