轉變和應用上的多個元素不同風格的同時

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 {}兩個跨度的

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>

變化