Html 如何应用'；：悬停'；元素样式到'；：：在'之后；元素？

我使用CSS创建了一个功能区背景，在上面我堆叠了一个社交媒体图标。功能区由两部分组成。上半部分是正方形，下半部分是“褶边位”所在的位置。代码如下：

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

这仅影响功能区的上半部分。为了给下半部分提供相同的效果，我应用了以下代码：

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

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

---

不幸的是，这似乎不起作用。有人知道任何解决方法吗？

只要交换它们就行了，所以当用户将鼠标悬停在带有#facebook图标的元素上时，您希望：：after部分也发生变化。如果您创建了一个plunker，我可以在那里为您应用更改，还可以查看HTML:）

---

只需交换它们，所以当用户将鼠标悬停在带有#facebook图标的元素上时，您希望：：after部分也发生变化。如果您创建了一个plunker，我可以在那里为您应用更改，还可以查看HTML:）

---

请在问题中包含a中的所有相关代码。对于CSS问题，这应该包括它所适用的HTML。请在问题本身的a中包含所有相关代码。对于CSS问题，这应该包括它所适用的HTML。