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 {}在樣式組件中。所以......樣式加載并且背景顏色和文本顏色是正確的，但是當懸停時，效果不會觸發。
uj5u.com熱心網友回復：
您是否嘗試將其設定為更高的 z-index ？可能在您的元素前面有一個塊阻止指標與其互動？只是第一個想法...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481861.html
標籤：javascript css 反应 动画 样式化组件
上一篇：嘗試部署到AZURE時出錯無法執行目標org.apache.maven.plugins:maven-surefire-plugin:2.22.2:test