Question

我试图获得半色和另一种颜色的链接，然后切换悬停。所以:(白色）你好（蓝色）每个人！ - ＆GT; （蓝色）你好（白色）每个人！

我想我可能已经过多地贬低了代码...这是一个更好的例子。

如何将它带到“每个人”的位置？周围没有盒子？

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

Answer 2

输入正确的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;
}

Answer 3

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

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

此CSS说“对于位于<a>元素内的.home-logo-text-roads元素，当它悬停时会将其文本颜色更改为#ffffff。这显然不是您想要的，因为您您的范围内没有<a>元素。如果您想要更改其父级<a>的悬停事件的跨度颜色，请切换选择器：

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

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

Answer 4

你需要这个。使用你想要的任何颜色。

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

点击 DEMO 。

跨度无法识别悬停的css类

4 个答案: