Styled Components cannot set :hover properties-CodePudding

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.

CodePudding user response：

Have you tried placing it a a 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...