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

当你把鼠标悬停在div上时，我试图改变文本的颜色，我以为我知道怎么做，但我一辈子都搞不清楚。我在jsfiddle中重新创建了div元素

我想做的是，当您将鼠标悬停在主div id=“初学者指南框”上时，框中的文本将变为#0096ff

正如您在Jsfilddle中看到的，我尝试的是设置div悬停的颜色，但这不起作用

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

---

您必须更改子div的颜色：

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

使用此完整路径

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

你需要增加你的

。初学者指南标题

规则，否则这些规则将胜过你创建的规则

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

---

将颜色设置为

。初学者指南标题如下：

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

另外，
。初学者指南标题
是一个没有定义的div，它跨越父div，因此
。初学者指南标题：hover
在它的主类下也起作用。