Html 跨度不为悬停的css类

我试图得到一个链接，一半是一种颜色，一半是另一种颜色，然后切换到悬停。所以：（白色）大家好（蓝色）大家！->（蓝色）大家好（白色）大家好

我想我可能把代码简化得太多了。。。这是一个更好的例子

我怎么才能把它弄到“每个人”周围都没有盒子的地方呢

HTML:

---

将HTML元素按正确顺序排列，以便应用CSS样式：

.home-logo-text a {
    color: #707070;
}
.home-logo-text-roads {
    color: #6698cb;
} 
.home-logo-text a:hover {
    color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
    color: #ffffff;
}

---

您上一个CSS规则看起来不正确：

.home-logo-text-roads a:hover {
    color: #ffffff;
}

这个CSS说“对于位于

.home logo text roads

元素内的

元素，当其悬停时，将其文本颜色更改为

#ffffff

。这显然不是您想要的，因为您的span中没有

元素。如果要更改作为其父级的

悬停事件的跨度颜色，请切换选择器：

a:hover .home-logo-text-roads {
    color: #ffffff;
}

---

记住，当选择器之间有空格时，它表示一个模糊的层次结构，规则应用于最右边的元素。

您需要这个。你想用什么颜色都行

.home-logo-text a:hover .home-logo-text-roads {
    color: #707070;
}

---

检查这里。

不只是发布答案，还应该发布原因，这是个好主意。

.home-logo-text-roads a:hover {
    color: #ffffff;
}

a:hover .home-logo-text-roads {
    color: #ffffff;
}

.home-logo-text a:hover .home-logo-text-roads {
    color: #707070;
}