如何將'：hover'元素樣式應用於':: after'元素？

Question

我使用CSS創建了Ribbon背景，並在頂部堆疊了社交媒體圖標。 色帶由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部分也進行更改。 如果您創建了一個插件，那么我可以為您應用更改，並且還會看到HTML ：）

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