响应覆盖div下的链接

Question

情景是这样的.

我已经构建了一个顶级导航原型,需要在它上面有一个叠加(透明PNG)图像.它目前覆盖了大约1/3的链接.请看下面:

有什么方法可以让前1/3的链接响应甚至 - 尽管有<div />部分覆盖它们吗？叠加层不包含任何可点击的内容,它只是一个设计功能.

我从来没有这样做过,也不会想象这是可能的,但我期待被证明是错的.

Javascript/jQuery 不是首选,但将作为最后的手段.

这是jsFiddle的测试用例,它直接模仿我当前代码的结构.

Answer 1

是的,这是可能的使用指针事件:无!

CSS

div.overlay {
    pointer-events: none;
}

IE的兼容性(http://caniuse.com/pointer-events)仍然不存在,因此需要条件CSS语句:

    <!--[if IE]>
        <style type="text/css">
            .overlay {
                background: none !important;
            }
        </style>
    <![endif]-->

如果使用带有CSS渐变背景的叠加div,则上面就足够了.如果使用透明图像(png,gif等),则需要将其添加到条件语句中:

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file-name.png', sizingMethod='scale');

希望有所帮助.