Question 189430 in CSS Question posted in
Some basic documentation can be found here.

Css – :Hover problem in React, not cover all div

:hover not cover all div, this images represent my problem.
I need the :hover to cover the whole blue circle

enter image description here

my code:

In index.

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

In style.

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

I try :hover in the ButtonContainer but only ButtonIcon div is covered by :hover

Tags:

2

Answers


  1. 0

    I think you are using SVG or jpg image for hamburger icon.
    Try to use .png(transparent) format. or if you are using .svg image please share full svg image.

    Login or Signup to reply.
  2. 0

    Try adding pointer-events styling for child component i.e. ButtonIcon

    pointer-events: none

    This will disable the cursor or any event for that Hamburger Icon and it should fix this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search