防止僞元素內容在懸停時更改顏色

當我將鼠標懸停在鏈接「EN | FR」上時，所有字符（包括管道字符'| '將顏色更改爲藍色。防止僞元素內容在懸停時更改顏色

a:hover { 
 
    color: blue; 
 
} 
 
a.language { 
 
    display: inline; 
 
    padding: 0; 
 
} 
 
a.language:last-child:before { 
 
    content: ' | '; 
 
}

<a class="language" href="/en">EN</a> 
 
<a class="language" href="/fr">FR</a>

我想實現，只有鏈接EN和FR變成藍色鼠標除了管道字符'的顏色| '就是在他們之間。

我在尋找類似：

a.language:last-child:before:hover { 
    color: grey; 
}

保持豎線「| '灰色。

我該如何做到這一點？

UPDATE：

感謝Paulie_D我有一個工作JSfiddle solution

來源

2016-09-29 StandardNerd

您只需將管道直接放入兩個錨標記之間的HTML中即可。如果你這樣做，管道將被加下劃線，並且它也將是可點擊的（導致法語href）。 – APAD1

是的，這是簡單的方法。但列表項是動態生成的，我不能修改HTML，所以我必須用CSS來做。 – StandardNerd

你接近：

a.language:last-child:hover::before { 
    color: red; 
}

JSfiddle Demo

，或直接申報僞元素的顏色，讓特別爲你贏得勝利。

a.language:last-child::before { 
    content: ' | '; 
    color:red; 
}

JSfiddle Demo

來源

2016-09-29 14:23:05

非常感謝Paulie_D，我更新了你的JSfiddle Demo以更符合我的用例：https://jsfiddle.net/qzfrx0wy/ – StandardNerd

我會簡單地插入管道字符的鏈接之間的常規字符，而不是有任何的CSS規則：

<a class="language" href="/en">EN</a> | <a class="language" href="/fr">FR</a>

來源

2016-09-29 14:27:27 Johannes

是的，這是簡單的方法。但列表項是動態生成的，我不能修改HTML，所以我必須用CSS來做。 – StandardNerd

只需添加你想要的顏色現有::before聲明：

a.language:last-child::before { 
     content: ' | '; 
     color: gray; 
}

jsFiddle

來源

2016-09-29 14:28:00

防止僞元素內容在懸停時更改顏色

回答

相關問題