将 div 放在链接内 - 区域仍然可在 div 外点击答案

【问题标题】：Putting a div inside a link - area still clickable outside div将 div 放在链接内 - 区域仍然可在 div 外点击
【发布时间】：2019-06-05 07:22:05
【问题描述】：

我在a标签内放了一个div目的是只有当我将鼠标悬停在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>

    )
}

【问题讨论】：

“但是即使我将鼠标移到 div 之外，仍然会出现手形光标。为什么？” - 因为这是带有href 属性集的a 元素的默认样式...？如果你不为这个特定的链接覆盖它，你需要覆盖它（然后为里面的 div 再次添加它。）
@04FS 因为我放了一个div inside 一个a 我的意图是只有当鼠标指针在 div 区域内而不是在它之外时才会出现光标.我想你没有理解这个问题
为什么需要 div 在一个？只需将 CSS 添加到 a，使其显示块
@Roy.B 这似乎也是一个解决方案，谢谢。那么拥有一个 div 没有任何好处？

标签： javascript html css reactjs material-ui

【解决方案1】：

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

【讨论】：

将 display:"inline-block" 添加到a 解决了它，但我不明白你的解释为什么......