将鼠标悬停在div上时文本颜色发生变化

Question

当您将鼠标悬停在div上时，我试图让文本颜色发生变化，我以为我知道如何去做，但我无法为我的生活弄清楚。我重新创建我的div元素中的jsfiddle

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

，当你将鼠标悬停在主DIV ID =“新手引导盒”比框内的文字将变为＃0096ff我所试图做的是

正如你可以在Jsfilddle中看到的，我正在尝试为div悬停设置颜色，但这不起作用。

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

Answer 1

你要改变孩子div的颜色：

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

Answer 2

使用这种全路径

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

和删除：

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

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

Answer 3

您需要增加specificity of your selector大于o f你的.beginners-guide-title规则，否则这些规则将胜过你创建的规则。

jsFiddle example

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

Answer 4

颜色设定为.beginners-guide-title这样的：

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