防止锚链接溢出被点击

Question

我有一个锚元素，其子元素（img）比锚元素大。我想将锚链接'clickable'区域设置为锚元素。

<div>
  <a href="">
    <img src="somewhere/images/this.svg" />
  </a>
</div>

这是一个codepen，展示了锚元素之外的可点击区域。

如果可能的话，我不想将这些分解为兄弟元素。

Answer 1

这是间接可能的。

问题是锚元素是父元素，这意味着点击任何子元素后，点击锚点。要解决此问题，您可以在子svg元素上disable click events。这样做时，只能点击锚元素。

Updated Example

a.yellow-clickable > svg {
  pointer-events: none;
}

在任何其他环境中，解决方案都非常简单。只需将overflow: hidden添加到锚元素即可。