Barnslig Barnslig - 1 month ago 17
CSS Question

Changing a color when hovering

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

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>