2017-03-06 147 views
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; 
} 

不幸的是,這似乎並不奏效。有沒有人知道任何解決方法?

+0

請在問題本身包含所有相關的代碼[mcve]。對於CSS問題,這應該包括它應用的HTML。 –

回答

2

只需將它們交換,所以當用戶將鼠標懸停在帶#facebook-icon的元素上時,您希望:: after部分也發生更改。如果你創建了一個plunker,我可以在這裏爲你提供更改,這也將看到HTML :)

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

謝謝克里斯。指出我在正確的方向。 – Craig

相關問題