1つのdiv内の異なるテキストの色をdivに移動するときに1つの色に変更する必要があります

Question

2つの異なる色（黒と赤）のテキストを表示したいとします。 テキストが入っているdivの上にユーザーが移動すると、divの背景色が変更され、divのすべてのテキストが白になります。

'span'要素を使用すると、1つの行に異なる色を表示できます。 しかし、divにカーソルを合わせると、 'span'要素のテキストは赤色のまま残り、他のテキストは白色に変わります。

どのようにすべてのテキストが白に変わることを確認するには？ すべての助力に感謝します。

.linkBackground 
{   
    background-color: White; 
    border-bottom: 1px solid #a22a29;   
    color: Black; 
} 

.linkBackground span 
{ 
    color: #a22a29; 
} 

.linkBackground:hover 
{ 
    background-color: #a22a29; 
    border-bottom: 1px solid White; 
    color: White; 
} 

これは私のHTMLです：：

<div class="linkBackground"> 
    This is <span>an example</span> 
</div> 

Answer 1

試してみてください。

.linkBackground:hover, 
.linkBackground:hover span { 
    color: #fff; 
} 

Answer 2

はjQueryの $を使用してソリューションを提案する（ 'linkBackground'）

は、ここに私のCSSです。 hover（function（）{ $（this）.find（ 'span'）.css（ 'color'、 'hexcode'）; }）

Answer 3

.linkBackground:hover { 
    background-color: #a22a29; 
    border-bottom: 1px solid White; 
    color: white !important; 
}