同时转换和应用多个元素的不同样式

Question

我有一个带有2个跨度的锚标记......

<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>

在悬停此锚标记时，我想更改跨度内文本的颜色，但我希望它们各自为不同的颜色。现在，我一次只能转换一个跨度。无论锚标签内的哪个跨度悬停在哪里，我怎样才能同时发生两个转换？

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

Answer 1

两个跨度的目标a:hover #span-id-name {}

＆＃13;

＆＃13;

a:hover #banner-logo-hello {
  color: red;
}

a:hover #banner-logo-world {
  color: yellow;
}

＆＃13;

<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>

＆＃13;

＆＃13;

＆＃13;

您还可以通过:nth-child或其:first-child或:last-child或:nth-of-type

等变体进行定位

＆＃13;

＆＃13;

a:hover span:last-child {
  color: red;
}

a:hover span:first-child {
  color: yellow;
}

＆＃13;

<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>

＆＃13;

＆＃13;

＆＃13;