从悬停中排除伪元素

时间:2015-02-23 14:14:16

标签: css css3 hover pseudo-element

如何排除: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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

这里的问题不是伪元素被:hover选择器本身“匹配”,而是它继承了color属性关于元素的相应CSS规则。

这就是为什么你需要在:before伪元素上显式设置它的原因 - 你不能使用选择器阻止继承,或者在父元素或原始元素上使用样式。