html - 如何将 ':hover' 元素样式应用到 '::after' 元素？

Question

我使用 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;
}

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

Answer 1

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

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