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

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

当你将鼠标悬停在一个div上时,我正试图让文本颜色发生变化,我想我知道该怎么做但我不能为我的生活搞清楚。我在jsfiddle中重新创建了我的div元素

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

我想要做的是当你将鼠标悬停在主div =“beginners-guide-box”上时,框内的文字将改为#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.

正如你在Jsfilddle中看到的那样,我正在尝试设置div悬停的颜色,但这不起作用。

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

4 个解决方案

#1

You have to change the color of the child div:

你必须改变子div的颜色:

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

#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;
}

#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.

您需要将选择器的特异性提高到大于.beginners-guide-title规则的特异性,否则这些规则将胜过您创建的规则。

jsFiddle example

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

#4

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

将颜色设置为.beginners-guide-title,如下所示:

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

#1