如何将'：hover'元素样式应用于':: after'元素？

Question

我已经使用CSS创建了一个功能区背景，其中我在上面堆叠了一个社交媒体图标。色带由2部分组成。上半部分是正方形，下半部分是'褶边'位置。代码如下：

#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; 
} 

不幸的是，这似乎并不奏效。有没有人知道任何解决方法？

Answer 1

只需将它们交换，所以当用户将鼠标悬停在带＃facebook-icon的元素上时，您希望:: after部分也发生更改。如果你创建了一个plunker，我可以在这里为你提供更改，这也将看到HTML :)

#facebook-icon:hover::after{ 
    color: #7d4826; 
    background-color: lavender; 
}