Have text color change when hover over div

Question

I'm trying to have the text color change when you hover over a div, I thought I knew how to do it but I can't for the life of me figure it out. I recreated my div element in jsfiddle

http://jsfiddle.net/Hhp8s/4/

What I am trying to do is when you hover over the main div id="beginners-guide-box" than the text within the box will change to #0096ff

As you can see in the Jsfilddle what I'm trying is set the color for the div hover but that doesn't work.

#beginners-guide-box:hover{
color: #0096ff;
text-decoration: none;
}

Answer 1

You have to change the color of the child div:

#beginners-guide-box:hover .beginners-guide-title{
   color: #0096ff;
   text-decoration: none;
}

Answer 2

use this full path

#beginners-guide-box:hover .beginners-guide-info .beginners-guide-title{
color: #0096ff;
text-decoration: none;
}

and delete this:

#beginners-guide-box:hover{
    color: #0096ff;
    text-decoration: none;
}

#beginners-guide-box a:hover {
    color: #0096ff;
    text-decoration: none;
}

Answer 3

You need to increase the specificity of your selector to be greater than that of your .beginners-guide-title rule, otherwise those rules will trump the one you created.

jsFiddle example

#beginners-guide-box:hover a div {
    color: #0096ff ;
    text-decoration: none;
}

Answer 4

Set color to .beginners-guide-title like this:

#beginners-guide-box:hover .beginners-guide-title{
    color: #0096ff;
    text-decoration: none;
}