重疊div覆蓋圖像，並使其不可點擊

我有一個絕對定位的div，因此我可以將它放置在圖像上。問題在於div的空白部分會使圖像下方的圖像無法點擊。在IE中，圖像仍然是可點擊的，但是在FF或Chrome中它不是/重疊div覆蓋圖像，並使其不可點擊

來源

2010-05-01 TomBs

您無法單獨通過CSS修復此問題。最簡單的方法是將div onclick事件設置爲與圖像onclick相同的功能。

來源

2010-05-01 15:12:38 fearofawhackplanet

你能寫這個函數嗎？ – TomBs 2010-05-01 15:14:32

那麼你的圖像onclick函數是什麼樣子？ – fearofawhackplanet 2010-05-01 15:17:08

將position: relative;添加至圖片。這是SSCCE，copy'n'paste'n'run它。

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2750416</title> 
     <style> 
      #overlap { 
       position: absolute; 
       width: 100%; 
       height: 61px; 
       background: pink; 
      } 
      img { 
       position: relative; /* Without it, the image disappears "behind" div */ 
       float: right; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="overlap">Overlap</div> 
     <img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')"> 
    </body> 
</html>

來源

2010-05-01 15:26:03 BalusC

您可以使用絕對元素的CSS4實驗功能pointer-events:none。這個功能的問題在於，它並不適用於所有瀏覽器，只有我知道的只有firefox和chrome。只是分享一下信息:)

來源

2013-07-24 18:35:08 Ivotje50

重疊div覆蓋圖像，並使其不可點擊

回答

相關問題