javascript - 将 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

anchor 标记a默认是display: inline。如果您将样式应用于包含流元素的元素或在 CSS 中表示为显示的任何其他元素: block ，您应该将其自身设置为适当的 block 容器类型，例如 block 或 inline-block 使其布局按预期工作。