0
我已经使用CSS创建了一个功能区背景,其中我在上面堆叠了一个社交媒体图标。色带由2部分组成。上半部分是正方形,下半部分是'褶边'位置。代码如下:如何将':hover'元素样式应用于':: after'元素?
#facebook-icon{
background-color: #7d4826;
color: #ffffff;
padding-top: 23px;
padding-left: 10px;
padding-right: 25px;
margin-right: 5px;
}
#facebook-icon::after{
content: "";
position: absolute;
padding-top: 10px;
border-bottom: 18px solid transparent;
border-left: 17px solid #7d4826;
border-right: 18px solid #7d4826;
margin-left: -10px;
}
我希望功能区在用户滚动图像时更改颜色。为此,我插入了以下代码:
#facebook-icon:hover{
color: #7d4826;
background-color: lavender;
}
这只影响功能区的上半部分。为了向下半部分提供相同的效果,我应用了以下代码:
#facebook-icon::after:hover{
color: #7d4826;
background-color: lavender;
}
不幸的是,这似乎并不奏效。有没有人知道任何解决方法?
请在问题本身包含所有相关的代码[mcve]。对于CSS问题,这应该包括它应用的HTML。 –