製作社交圖標時使用僞元素內容在懸停時更改顏色

我有一系列使用圖標字體和css content:屬性呈現的社交圖標。製作社交圖標時使用僞元素內容在懸停時更改顏色

.icon-google-plus:before { 
    content: "\e003"; 
}

在僞前元素中顯示谷歌加號圖標。

如何在懸停時將此圖標更改爲顏色？我想，錯那將是類似這樣的東西...

.icon-google-plus:before a:hover { 
    colour: @google_plus_red; 
}

我標記的要求

<a class="share_styx icon-google-plus" target="_blank" href="https://plus.google.com/share?url={{url absolute="true"}}"> 
<span class="hidethis_styx"> 
    Google+ 
</span> 
</a>

來源

2013-10-25 Luke

請包括您的HTML標記，您的選擇器的順序是錯誤的，應該看起來更像'a：hover .icon-google-plus：之前' –

我試過了。沒有運氣！ – Luke

試試這個

a.icon-google-plus:hover:before { 
    color: red; 
}

它會改變徘徊圖標的顏色鏈接。

來源

2013-10-25 19:04:38 Sachin

你能解釋一下你是如何知道僞元素應該進入哪個順序的。爲什麼它是'：懸停：在'之前？ – Luke

@Luke因爲：懸停事件發生在錨標記（'a'）上，而不是僞元素。此類也應用於錨標記，而不是僞元素。因此，：來臨之前 –

我明白了，謝謝你清理那個。 – Luke

製作社交圖標時使用僞元素內容在懸停時更改顏色

回答

相關問題