防止錨點鏈接溢出無法點擊

Question

我有一個錨點元素，其中有一個大於錨點元素的子元素（img）。我想將錨點鏈接的「可點擊」區域設置爲僅錨點元素。

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

這是一個codepen演示錨點元素外部的可點擊區域。

如果可能，我想不必將它們分解爲兄弟元素。

Answer 1

這是間接可能的。

問題是，錨元素是父元素，這意味着點擊其任何子元素後隨即點擊錨點。要解決此問題，您可以在元素上的disable click events。這樣做，只有錨元素是可點擊的。

Updated Example

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

在任何其它情況下，該解決方案將是非常簡單的。只需將overflow: hidden添加到錨點元素即可。