Reputation: 72232

Responding to links under an overlay div

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:

enter image description here

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.

Upvotes: 2

Answers (7)

Luke

Reputation: 5612

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.

Upvotes: 7

gilly3

Reputation: 91497

For what it's worth, this works in all but ie7, and is almost all CSS. It just requires adding a little html:

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

Upvotes: 0

thirtydot

Reputation: 228182

There's only one way to do this (as far as I know), and it's not great:

Live Demo

Add the same background image (to each) button that your .png with alpha channel overlaps.
Use background-position with pixel perfect offsets.

I'm lucky that in that demo it only overlapped the last button :)

Upvotes: 1

Michael

Reputation:

Hm... use links with no text, with display: block and width and height set. Put inside a DIV as container and z-index to be over the divs from the menu, and position: absolute. Then set the right position for the container. Something like:

.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]

That's just the main idea, you will know how to do it :)

Upvotes: 0