Clever Geek Handbook

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>
+3


source to share


4 answers


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

+5


source


Try the following:

div:hover, div:hover a{
            background-color: #336699;
            color: #FFF;
        }


violin

+3


source


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/

+3


source


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

0


source






More articles:


All Articles