Переход и применение различных стилей на нескольких элементов одновременно

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

Target 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>