ホバリング時に色を変える

Question

私はhtml/cssで私の試験に取り組んでいます。私は質問があります。私たちはフォント用のウェブサイトを作ろうとしています。インデックスページを持っていたいと思っています。区切り文字が青色に着色されている間、 Roboto

とフォントが白に着色されている。この

R/Rのように披露したフォントの、しかし私は、区切り文字が白に変えたい残りながら、テキストの青色に変わります。今の

私はこれがあります。

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

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

をそして、私の人生はそれを行う方法を見つけ出すために、私はカント。

Answer 1

あなたは右の線に沿っていますが、セパレータ要素のセレクタで具体的にする必要があります。以下のCSSはあなたが必要なものを達成する必要があります

a:hover { 
    color: #00ebff; 
} 

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

を使用すると、インラインスタイルを使用しているので、ここで!importantルールを使用して、必要不可欠であることに注意してください。しかし、あまりにもあなたのCSSファイルに.spacerのスタイルを定義するためにはるかに良いでしょう：

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

このコード

.spacer{ 
     color: #fff; 
    } 

    a:hover { 
     color: #00ebff; 
    } 

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