html - 具有跨度的CSS类无法识别悬停

Question

我试图让一个链接一半是一种颜色，一半是另一种颜色，然后在悬停时切换。所以:(白色)大家好(蓝色)大家好! -> (蓝色)大家好(白色)大家好!

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

我如何让它到达“每个人!”的位置？周围没有盒子吗？

HTML:

<div class="home-logo-text">
<a href="#">
    HELLO
    <span class="home-logo-text-roads">
       EVERYONE!
    </span>
</a>
</div>

CSS:

.home-logo-text a {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #808080;
}
.home-logo-text-roads  {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #6698cb;
}
.home-logo-text.light a {
color: rgba(255,255,255,0.9);
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #808080;
}

Answer 1

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