徘徊時更改顏色

Question

我正在用html/css進行我的考試，並且我有一個問題 - 我們應該爲字體創建網站，並且我希望有一個索引頁，在那裏我想擁有一個展示這樣

R/r的 的Roboto

與字體爲白色的彩色的，而分隔符是在藍色的彩色字體的，但是我希望分隔符轉白，而其餘的的文字變成藍色。

現在我有這樣的：

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; 
    }