从悬停中排除伪元素
Exclude pseudo elements from hover
如何排除像 :before
和 :after
这样的伪元素被选择器更改,例如::hover
?
也许有某种我不知道的 'main pseudo element'?
我试过使用 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>
这里的问题不在于伪元素被:hover
选择器本身"matched",而是它继承了color
属性 来自元素上相应的 CSS 规则。
这就是为什么您需要在 :before
伪元素上显式设置它的原因 — 您不能使用选择器或在父元素或原始元素上使用样式来阻止继承。
如何排除像 :before
和 :after
这样的伪元素被选择器更改,例如::hover
?
也许有某种我不知道的 'main pseudo element'?
我试过使用 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>
这里的问题不在于伪元素被:hover
选择器本身"matched",而是它继承了color
属性 来自元素上相应的 CSS 规则。
这就是为什么您需要在 :before
伪元素上显式设置它的原因 — 您不能使用选择器或在父元素或原始元素上使用样式来阻止继承。