There is an anchor tag containing two spans...
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
When hovering over the anchor tag, I want to change the color of both span texts simultaneously, each with a different color. Currently, only one span transitions at a time. How can I ensure that both spans transition together when hovered, regardless of which span inside the anchor tag is being hovered on?
#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;
}