Putting a div inside a link - area still clickable outside div

Question

I put a div inside an a tag with an intent that only when I hover on the area occupied by the div , I will get the hand cursor.

But it has a strange behavior.

You can see that the div has fixed dimensions (red border).

But even if I move the mouse outside the div, still the hand cursor appears. Why?

Like I said I basically want only the area inside the red border to be clickable.

Here is the code:

const AppCustomIcon = (props) => {
    return (
        <a target="blank"

           href={props.url}>
        <div style={{
            height: 100,
            width: 100,
            display: "flex",
            flexDirection: "column",
            border:"1px solid red",
            alignItems: "center"
        }}>


                <IconButton
                    style={{marginRight: 10}}
                    onClick={props.handleClick}
                >
                    {props.icon}
                </IconButton>
                <Typography variant={"body1"}>{props.text}</Typography>

        </div>
        </a>

    )
}

Answer 1

Anchor tag a by default is display: inline . If you are applying styles to an element that contains flow elements or any other elements that are represented in CSS as display: block, you should set the itself to a proper block container type such as block or inline-block for its layout to work as intended.