將鼠標懸停在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; 
}