：hover没有覆盖所有的div，这张图片代表了我的问题。我需要：悬停覆盖整个蓝色圆圈
enter image description here
我的代码：
在索引中。

return (
        <Container>
            <LogoContainer>
                <ButtonContainer>
                    <ButtonIcon alt='' src={HamburguerIcon} />
                </ButtonContainer>
                <img
                    style={{ cursor: 'pointer', width: '100px' }} 
                    alt=''
                    src={Logo}
                />
            </LogoContainer>
        </Container>
    )
}

很有型。

export const ButtonContainer = styled.div`
    background-color: blue;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    :hover {
            background-color: gray;
    }
`;

我尝试在ButtonContainer中使用：hover，但只有ButtonIcon div被：hover覆盖