透明Div背后的可点击图像映射 - 在IE中工作

时间:2012-09-21 17:13:07

标签: css z-index imagemap

在我得到一堆下选票之前,我想指出,我想我明白为什么它不起作用但我想看看社区中是否有人遇到过这种困境,如果有的话能够做到克服这个问题。

所以,我有一个可点击的图像映射。由于不重要的原因,它被放入一个div(我们称之为B),它作为<body>标记的第二个子节点存在。然后,这个divs兄弟(让我们称之为A)拥有整个页面包装器和其余的站点内容。这意味着B几乎是作为背景图像工作而A是整个网站。在A中有一个透明的div填补了一个空隙,允许B来(显示)通过。不幸的是,我的客户已决定他想制作A图像映射但保持标记相同。图像映射执行它应该做的并且可以在IE中单击,但是,在更好的浏览器(Chrome,FF)中,图像映射不可点击,因为理论上A重叠B因此使图像映射不可用。

我的问题是,为什么IE工作正常,FF和Chrome失败?并且,我可以使用哪种方法来强制FF理解尽管B落后于A,但我需要B可点击?这甚至可能吗? CSS Z-Index?什么...?

Markup解释情况:

<div id="wrap" class="A">Site Content</div>
<div id="bg" class="B"><img src="" /><map></map></div>

1 个答案:

答案 0 :(得分:1)

只有IE允许事件“通过”透明元素。就像 cimmanon 所说,这并不意味着它表现得正确

Internet explorer 8 event fall through transparent parents

您可以将点击事件从A的透明区域传递到B,但这需要大量的javascript。你的问题没有CSS解决方案。