Changing a color when hovering - html

Question

I am working on my exam with html/css, and I have a question - we're supposed to make a website for fonts, and I want to have a index page where I want to have one of the fonts showcased like this
R/r
Roboto
And the font is colored in white, while the seperator is colored in a blue color, however I want the seperator to turn to white, while the rest of the text turns to blue.
For now I have this:
a:hover {
color: #00ebff;
transition:
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
And I cant for the life of me figure out how to do it.

Answer 1

You're along the right line, but you need to be more specific in the selector for the separator element. The following CSS should achieve what you need:
a:hover {
color: #00ebff;
}
a:hover span.spacer {
color: #fff !important;
}
Please note that using the !important rule here is essential, since you're using inline styles. However, it would be much better to define the style for .spacer in your CSS file too:
a .spacer {
color: #00ebff
}
a:hover {
color: #00ebff;
}
a:hover .spacer {
color: #fff;
}
<a href="roboto.html">
<h1>R<span class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>

Answer 2

.spacer{
color: #00ebff;
}
a:hover {
color: #00ebff;
}
a:hover h1 .spacer{
color: white;
}

Answer 3

a:hover {
color: #00ebff !important;
}
a:hover span.spacer {
color: #fff !important;
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>

Answer 4

Use this code
.spacer{
color: #fff;
}
a:hover {
color: #00ebff;
}
a:hover .spacer{
color: white !important;
}