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}; } `;Y estoy pasando los accesorios como tal:
<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> Todo funciona excepto el estado de desplazamiento. Quiero implementar una animación css simple cuando se desplaza el div, pero usando componentes con estilo. Me he referido a la documentación y parece que todo lo que necesito es &:hover {} dentro del componente con estilo. SO... los estilos se cargan y el color de fondo y el color del texto son correctos, pero cuando se desplaza, el efecto no se dispara.
¿Has intentado colocarlo en un índice z más alto? ¿Puede haber un bloque frente a su elemento que impide que el puntero interactúe con él? solo una primera idea...