将div放在链接内-div外部仍可点击的区域
我将div放在a标记内，目的是只有当我将鼠标悬停在div所占据的区域上时，才会得到手形光标。 / p>
但是它有一个奇怪的行为。
您会看到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>
)
}
1 个答案:
答案 0 :(得分：3)
锚标签a默认为display: inline。
如果将样式应用于包含流程元素或CSS中显示为display：block的任何其他元素的元素，则应将其自身设置为适当的块容器类型，例如block或inline-block使其布局按预期工作。