HTML/CSS：部分被其他圖片鏈接覆蓋的圖片鏈接不可點擊

我有兩個包含標籤的標籤。它們相對定位，一個具有負Z指數，出現在另一個之後。雖然它們被抵消了，所以在下面的鏈路上有很多可見區域。下面的鏈接不可點擊，並且不會註冊CSS懸停。我可以在網上找到的大多數建議將覆蓋元素設置爲「指針事件：無」，但是我的覆蓋元素也是一個鏈接，所以我仍然希望它是可點擊的。HTML/CSS：部分被其他圖片鏈接覆蓋的圖片鏈接不可點擊

編輯：的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>

來源

2016-06-12 Nick

您可以添加HTML和CSS，也許小提琴？你真的需要一個負面的'Z-索引'嗎？ – insertusernamehere

發佈重現問題的工作代碼片段 – LGSon

如果較小的div如果在底下甚至可以看到，它又如何顯示？如果它在上面，它應該是可點擊的。 – warkentien2

你的第二個鏈接/圈有-5的z-index將始終把它放在別的（除非你使用一個連降低Z指數）。使第二個鏈接/圓形z-索引至少爲0，但是比其他兩個圓圈高得多;在這種情況下，我使用了z-index：2。

我建議這樣的：

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

並添加CSS定義所有的一HREF中顯示爲：inline-block的是這樣的：

a { 
    display: inline-block; 
}

另一種方式做，這是創建三個的div和使它們的邊界半徑爲100％，這樣它們的重疊實際上是圓形的，而不是由內部的href和png圖像創建的正方形。

來源

2016-06-12 18:49:11

你是對的，非常感謝 – Nick

<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>

來源

2016-06-12 19:05:58 Zohaib

HTML/CSS：部分被其他圖片鏈接覆蓋的圖片鏈接不可點擊

回答

相關問題