重叠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覆盖图像，并使其不可点击

回答

相关问题