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。 –