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