样式化组件无法设置 :hover 属性

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

我将这样传递道具：

<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 {} 在样式组件中。所以...样式加载并且背景颜色和文本颜色正确，但是悬停时，效果没有触发。

Answer 1

你试过把它放在更高的位置吗z-index？可能在您的元素前面有一个块阻止指针与其交互？只是第一个想法...

样式化组件无法设置 :hover 属性

Styled Components cannot set :hover properties

javascript

css

animation

reactjs

styled-components