我有一个包含 2 个 span 的 anchor 标签...
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
悬停此 anchor 标记时，我想更改范围内文本的颜色，但我希望它们各自为不同的颜色。现在，我一次只能让一个 span 过渡。无论悬停在 anchor 标记内的哪个跨度上，我如何才能让两个转换同时发生？
#banner-logo-hello:hover,
#banner-logo-hello:active,
#banner-logo-hello:focus {
color: red;
transition: 0.5s;
}
#banner-logo-world:hover,
#banner-logo-world:active,
#banner-logo-world:focus {
color: yellow;
transition: 0.5s;
}
最佳答案
两个跨度的目标 a:hover #span-id-name {}
a:hover #banner-logo-hello {
color: red;
}
a:hover #banner-logo-world {
color: yellow;
}<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>您还可以通过 :nth-child 或类似 :first-child 或 :last-child 或 的变体来定位>:nth-of-type
a:hover span:last-child {
color: red;
}
a:hover span:first-child {
color: yellow;
}<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>关于css - 同时在多个元素上过渡和应用不同的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41793451/