Is there a hack to make an image click-through while still on top?

Question

I've been designing a new theme out of boredom and found an idea I really liked. It uses the :before and :after pseudo-elements to put two images on top of the menu bar, to make it loo like some animals are walking/hanging on it.

The problem I'm having with this is the fact that these elements then make the button parts underneath unclickable. There are several pixels at the top where, even though not directly under an animal, can't be clicked. The logo, which is meant to sit behind the image at the left, can only be clicked at the top above where the generated block is.

If you're confused, see the jsFiddle. In this example, the logo isn't present so you can see that link behind it is completely unclickable without tabbing.

Is there any workaround/hack that can make the image still appear on top of all the content, but still allow the links below it to be clicked through the image? Perhaps an alternate way of adding the images on top so at least the space in between them is clickable?

Answer 1

Original Answer

Well, its not fully cross browser yet, but pointer-events: none on those pseudo-elements is probably what you really seek. Here's the fiddle.

Secondary Answer (perhaps more cross browser)

Taking some inspiration from Jimmie Lin's idea, but keeping it all semantic, if you make sure the stacking context remains unchanged for all the elements, then for every a you need "pushed forward" set something like this (see fiddle):

.pushForward {position: relative;}
.pushForward:before {
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1000;
}

Answer 2

One approach (this is extremely hacky, but theoretically should work) is that you should add a <div> with higher z-index than the animal icons, then set it to have an opacity of 0. I am not sure whether setting opacity to 0 will hide the element (it shouldn't), but once you create this <div>, copy-paste all of your links that are affected by your icons there.

Theoretically, this transparent DIV would effectively replicate the links again and catch all the click events that are supposed to go on the icons.

Try it out, maybe it works - just a hacky idea.