样式化组件无法设置：悬停属性

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}; } `;

And I am passing the props as such:

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

Everything works except the hover state. I want to implement a simple css animation when the div is hovered, but using styled components. I have referred to the documentation and it seems all I need is &:hover {} inside the styled component. SO... the styles load and the background color and text color is correct, but when hovered, the effect is not firing.

Answer 1

Have you tried placing it aa higher z-index ? may be there is a block in front of your element that is preventing the pointer from interacting with it ? just a first idea...