Responding to links under an overlay div

Question

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.

Answer 1

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.

Answer 2

you could make a transparent image the size of the tab and then put that image as a link and position it perfectly over the tab.