Помещение div внутри ссылки - область, по-прежнему активируемая за пределами div

Question

Я поместил div внутри тега a с намерением, что только когда я наведусь на область, занятую div , я получу курсор в виде руки.

Но у него странное поведение.

Вы можете видеть, что div имеет фиксированные размеры (красная граница).

Но даже если я переместу мышь за пределы div, все равно появится курсор в виде руки. Почему?

Как я уже сказал, я хочу, чтобы только область внутри красной границы была кликабельной.

Вот код:

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

Якорный тег a по умолчанию равен display: inline.Если вы применяете стили к элементу, который содержит элементы потока или любые другие элементы, которые представлены в CSS как display: block, вы должны установить для себя правильный тип контейнера, например block или inline-block, чтобы его макет былработать как задумано.