响应覆盖div下的链接 [英] Responding to links under an overlay div

问题描述

我已经构建了一个顶级导航原型，它需要在其上放置一个叠加（透明PNG）图像。

它的顶部。它目前覆盖了大约1/3的链接。 请参阅以下内容：

< p> div /> 部分覆盖他们？

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

Javascript / jQuery 不是首选，但会用作最后的手段。

这是 jsFiddle测试用例 ，它直接模仿了我当前代码的结构。 是的，这个可能的使用 ！

CSS $ b

  div.overlay {
 pointer-events：none; 
 
  

IE的兼容性（ http://caniuse.com/pointer-events ）仍然不存在，因此需要有条件的CSS语句：

 <！ -  [if IE]> 
< style type =text / css> 
 .overlay {
背景：无！重要; 
} 
< / style> 
<！[endif]  - > 
  

如果使用带CSS渐变背景的叠加div，以上就足够了。如果使用透明图像（png，gif等），则需要将其添加到条件语句中：

 过滤器：progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='file-name.png'，sizingMethod ='scale'）; 
  

希望有所帮助。

The scenario is this.

I've built a top navigation prototype which needs to have an overlay (transparent PNG) image on top of it. It currently covers about 1/3 of the links. Please see below:

Is there any way I can make the top 1/3 of the links respond even-though there's a <div /> covering them partly? The overlay won't contain anything clickable it's only a design feature.

I've never done this and wouldn't imagine it's possible but I look forward to being proven wrong.

Javascript/jQuery not preferred but will use as a last resort.

Here's a test case on jsFiddle, it directly mimics the structure of my current code.

解决方案

Yes, this IS POSSIBLE using pointer-events: none!

CSS

div.overlay {
    pointer-events: none;
}

Compatibility for IE (http://caniuse.com/pointer-events) is still non-existent so a conditional CSS statement is required:

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

If using an overlay div with CSS gradient background the above is enough. If using a transparent image (png, gif, etc), you'll need to add this to your conditional statement:

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

Hope that helps.

这篇关于响应覆盖div下的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！