::在僞元素干擾子懸停狀態之前

Question

我正在實現一個「打開音樂播放器」按鈕，將音樂播放器滑動到視圖中。滑動在我的實際項目代碼中工作正常，但懸停狀態給我帶來了問題。

具體要求：

1. 按鈕的不透明度爲0.8在默認情況下，和1懸停
2. 按鈕的父元素需要旋轉並在小屏幕上的音樂播放器上方擺動，但背景圖像需要保持相同的方向。爲了做到這一點，我將背景樣式應用到父級的before僞元素。
3. UPDATE：ADDITIONAL REQUIREMENT該按鈕在點擊時旋轉180度，所以背景圖像（我使用linear-gradient進行了模擬）無法連接到按鈕本身。 :(

如果我註釋掉:before風格，懸停效果還算不錯。但是當他們目前他們似乎與按鈕的懸停狀態干涉，使得它閃爍，有時甚至完全消失。

CodePen New CodePen

謝謝！

Answer 1

如果主元素是一個三角形和僞元素爲背景，用戶可能會遇到閃爍效果。下面是相關在你的代碼的一部分：

&:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: purple; 
} 

.open-player-btn { 
    margin: 15px; 
    border-style: solid; 
    border-width: 20px 0 20px 34px; 
    border-color: transparent transparent transparent orange; 
    .hover-opacity; 
} 

嘗試改變你把僞元素的元素。這裏是revized代碼：

.open-player-btn { 
    width: 100%; 
    height: 100%; 
    background: purple; 
    .hover-opacity; 

    &:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    margin: 15px; 
    border-style: solid; 
    border-width: 20px 0 20px 34px; 
    border-color: transparent transparent transparent orange; 
    } 
} 

UPDATE：

如果我沒弄錯了，該箭頭應臉上留下開放的狀態，但梯度應保持不變。改變你的CodePen的程度似乎是有用的。

&.open { 
    .open-player-btn-wrapper { 
    transform: rotate(90deg); 
    } 

    .open-player-btn { 
    transform: rotate(-90deg); 
    &:before { transform: rotate(180deg); } 
    } 
}