樣式化組件無法設置：懸停屬性

Question

 export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; cursor: pointer; fill: ${(props) => props.color}; &:hover { background-color: ${(props) => props.hoverBgColor}; color: ${(props) => props.hoverColor}; fill: ${(props) => props.hoverColor}; } `;

我這樣傳遞道具：

 <WatchVideoButtonWrapper bgColor={navbar_button_background_color} color={navbar_button_text_and_icon_color} hoverBgColor={navbar_button_hover_background_color} hoverColor={navbar_button_hover_text_and_icon_color} > ... </WatchVideoButtonWrapper>

除懸停狀態外，一切正常。 我想在 div 懸停時實現一個簡單的 css 動畫，但使用樣式組件。 我已經參考了文檔，看來我所需要的只是&:hover {}在樣式組件內。 所以......樣式加載並且背景顏色和文本顏色是正確的，但是當懸停時，效果不會觸發。

Answer 1

您是否嘗試將其設置為更高的 z-index ？ 可能在您的元素前面有一個塊阻止指針與其交互？ 只是第一個想法...