我有一个绝对定位的div,因此我可以将它放置在图像上。问题在于div的空白部分会使图像下方的图像无法点击。在IE中,图像仍然是可点击的,但是在FF或Chrome中它不是/重叠div覆盖图像,并使其不可点击
2
A
回答
0
您无法单独通过CSS修复此问题。最简单的方法是将div onclick事件设置为与图像onclick相同的功能。
1
将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>
0
您可以使用绝对元素的CSS4实验功能pointer-events:none
。这个功能的问题在于,它并不适用于所有浏览器,只有我知道的只有firefox和chrome。 只是分享一下信息:)
相关问题
- 1. 点击重叠图像
- 2. 使用指针事件点击重叠的div并隐藏div
- 3. 覆盖图像上的div
- 4. 用图像覆盖div
- 5. Android ImageView可点击覆盖
- 6. CSS div覆盖在Internet Explorer中不可点击
- 7. 如何在Android中使重叠图像可点击?
- 8. 使覆盖背景点击可以
- 9. div覆盖textarea捕捉鼠标点击
- 10. Javascript和jQuery中可点击的网格覆盖图像
- 11. 我们可以用相机预览覆盖点击图像吗?
- 12. 点击小图像和覆盖更大的图像
- 13. 如何使重叠图像可点击;图像透明度正在增加?
- 14. 图像与div重叠
- 15. 重叠div制作链接不可点击
- 16. 如何在谷歌地图可叠加覆盖div?
- 17. 使重叠div中的按钮可点击
- 18. CSS Div覆盖其中的其他div
- 19. 使重叠div“不可点击”,以便可以访问以下内容?
- 20. 禁用Div覆盖点击,但允许儿童点击
- 21. 把div与图像重叠使用CSS
- 22. 如何移动div使其不重叠
- 23. 如何使用内部href使div可点击但不覆盖其他内部hrefs
- 24. 防止覆盖其他Div
- 25. 覆盖整个div与图像
- 26. 覆盖整个div的图像CSS
- 27. CSS3:在DIV上覆盖渐变图像
- 28. 用透明div覆盖跨度/图像
- 29. 覆盖DIV了图像,适合宽度
- 30. 覆盖点击颜色/可绘制
你能写这个函数吗? – TomBs 2010-05-01 15:14:32
那么你的图像onclick函数是什么样子? – fearofawhackplanet 2010-05-01 15:17:08