Ändern einer Farbe beim Schweben

Question

Ich arbeite an meiner Prüfung mit html/css, und ich habe eine Frage - wir sollen eine Website für Schriftarten erstellen, und ich möchte eine Indexseite haben, wo ich eine haben möchte der ähnliche

R/r Roboto

jedoch präsentiert Schriftarten

Und die Schriftart in weiß gefärbt ist, während die seperator in einer blauen Farbe gefärbt ist, möchte ich die seperator auf weiß drehen, während der Rest der Text wird blau.

Für jetzt habe ich dies:

a:hover { 
 
    color: #00ebff; 
 
    transition: 
 
}

<a href="roboto.html"> 
 
    <h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1> 
 
    <h2>Roboto</h2> 
 
</a>

und ich kann nicht für das Leben von mir herauszufinden, wie es zu tun.

Answer 1

Sie sind auf der richtigen Linie, aber Sie müssen genauer in der Auswahl für das Trennelement sein. Die folgende CSS sollte erreichen, was Sie brauchen:

a:hover { 
    color: #00ebff; 
} 

a:hover span.spacer { 
    color: #fff !important; 
} 

Bitte beachten Sie, dass die Verwendung von !important Regel hier wesentlich ist, da Sie Inline-Styles verwenden. Allerdings wäre es viel besser, den Stil für .spacer in Ihrer CSS-Datei zu definieren, zu:

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

Verwenden Sie diesen Code

.spacer{ 
     color: #fff; 
    } 

    a:hover { 
     color: #00ebff; 
    } 

    a:hover .spacer{ 
     color: white !important; 
    }