從懸停中排除僞元素

如何排除:before和:after等僞元素不被選擇器更改，例如：:hover？從懸停中排除僞元素

也許有某種我不知道的'主要僞元素'？

我試過使用CSS3 :not()聲明，但這沒有奏效。

使用：.facebook:hover:before {color: black;}工作正常，但我相信有更好的解決方案。

例：我想Facebook的標誌，以保持黑色，改變文字顏色。

body { 
 
    background: #F7F7F7; 
 
    margin: 0px; 
 
} 
 
.share-button { 
 
    background: #FFFFFF; 
 
    border: 1px solid #D8D8D8; 
 
    display: inline-block; 
 
    font-family: 'Open Sans'; 
 
    font-weight: 600; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    margin: 0px; 
 
    padding: 12px 24px 12px 12px; 
 
    transition: color 1s; 
 
} 
 
.facebook:before { 
 
    display: inline-block; 
 
    height: auto; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 12px; 
 
    padding-right: 12px; 
 
    width: auto; 
 
    content: '\f09a'; 
 
} 
 
.share-button:hover { 
 
    color: #374D8D; 
 
}

<button class="share-button facebook"> 
 
    Share on facebook 
 
</button>

來源

2015-02-23 Berendschot

這裏的問題不是僞元素「被匹配」由:hover選擇本身，但它是從相應的CSS規則繼承color財產元素上。

這就是爲什麼您需要在:before僞元素上明確設置它的原因 - 您不能使用選擇器阻止繼承，也不能使用父元素或原始元素上的樣式。

來源

2015-02-23 14:19:02 BoltClock

在'.facebook：before'中設置顏色工作正常！ – Berendschot 2015-02-23 14:21:49

@ Maarten1909：的確 - 我只注意到'：hover'規則中只有一個'color'聲明。 – BoltClock 2015-02-23 14:23:41

從懸停中排除僞元素

回答

相關問題