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

Question

当你将鼠标悬停在div上时，我正试图让文本颜色发生变化，我想我知道该怎么做但我不能为我的生活弄明白。我在jsfiddle

中重新创建了我的div元素

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

我想要做的是当你将鼠标悬停在主div =“beginners-guide-box”上时，框内的文字将改为＃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增加到大于.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;
}