响应覆盖div下的链接

Question

情况就是这样。

我已经构建了一个顶级导航原型，需要在其上面放置一个叠加（透明PNG）图像。它目前覆盖了大约1/3的链接。 请参阅以下内容：

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

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

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

这是一个test case on 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');

希望有所帮助。

Answer 2

你可以制作一个与标签大小相同的透明图像，然后将该图像作为链接放置，并将其完美地放在标签上。

Answer 3

只有一种方法可以做到这一点（据我所知），并不是很好：

Live Demo

• 添加与{alpha}频道重叠的.png相同的背景图片（每个）按钮。
• 使用background-position像素完美偏移。

我很幸运，在那个演示中它只重叠了最后一个按钮:)

Answer 4

不，只有顶层可以点击。

Answer 5

click（）事件可以通过jquery模拟，虽然它可能不适用于你的问题......

您也可以（作为最后的手段）替换导航并将其置于或多或少像图像图...

Answer 6

嗯...使用没有文字的链接，显示：块和宽度和高度设置。将DIV作为容器和z-index置于菜单的div之上，并且position：absolute。然后为容器设置正确的位置。类似的东西：

.linkOverlay
{
   z-index: 10;
   display: block;
   width: 100px;
   height: 40px;
   float: left;
}
.linkContainer{
   position: absolute;
   top: (top here);
   left: (left here);
}
[div class="linkContainer"]
    [a href="page.html" class="linkOverlay"][/a]
    [a href="page_two.html" class="linkOverlay"][/a]
[/div]

这只是主要想法，你会知道如何做到这一点：）

Answer 7

对于它的价值，除了ie7之外，它都适用于所有CSS，几乎都是CSS。它只需要添加一点html：

http://jsfiddle.net/pXXpU/8/