从悬停中排除伪元素

如何排除: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

从悬停中排除伪元素

回答

相关问题