HTML / CSS：無法點擊被另一個圖像鏈接部分覆蓋的圖像鏈接

Question

我有兩個包含標簽的標簽。 它們相對放置，並且一個z索引為負，出現在另一個之后。 但是它們是偏移的，因此在下部鏈接上有很多可見區域。 下部鏈接不可單擊，並且不注冊CSS懸停。 我在網上可以找到的大多數建議都將Coverage元素設置為“ pointer-events：none”，但是我的Covering元素也是一個鏈接，因此我仍然希望它是可單擊的。

編輯：jsfiddle演示問題： https ://jsfiddle.net/cfbxz7pb/

 <div style="position: relative"> <a href="http://www.google.com" style="position: relative"> <img style="width: 150px" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> </a> <a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: -5"> <img style="width: 150px; -webkit-filter: hue-rotate(80deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> </a> <a href="http://www.twitter.com" style="position: relative; left:-120px"> <img style="width: 150px; -webkit-filter: hue-rotate(120deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> </a> </div> 

Answer 1

您的第二個鏈接/圓的Z索引為-5，它將始終放在其他任何內容下（除非您在其旁邊使用更低的Z索引）。 使第二個鏈接/圓的z-index至少為0，但絕對高於其他兩個圓； 我在這種情況下使用了z-index：2。

我建議這樣做：

<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: 2">

並添加將所有a href定義為display的css：inline-block，如下所示：

a {
  display: inline-block;
}

執行此操作的另一種方法是創建三個div並使它們的邊界半徑為100％，這樣，它們的重疊實際上就是圓形，而不是內部的href和png圖像創建的正方形。

Answer 2

 <div style="position: relative"> <a href="http://www.google.com" style="position: relative; z-index: 77;"> <img style="width: 150px; " src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> </a> <a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: 0"> <img style="width: 150px; -webkit-filter: hue-rotate(80deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> </a> <a href="http://www.twitter.com" style="position: relative; left:-120px; z-index: 0"> <img style="width: 150px; -webkit-filter: hue-rotate(120deg);" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> </a> </div>