32

Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.

I've tried background: url('...') transparent, but to no avail.

Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).

Improve this question
1
  • @Knu: The overlay div is, like the thing it is overlaying, a block level element. Making a span inline-block or something might work. Commented Jan 28, 2011 at 12:33

3 Answers 3

Reset to default
63

I've fixed your problem by adding pointer-events: none; to the absolute block.

body { margin: 0; padding-left: 10px; font: 20px Arial, sans-serif; line-height: 30px; } a:hover { color: red; } #overlay-blocking, #overlay-passing{ position: absolute; height: 30px; width: 10em; left: 0; } #overlay-blocking { top: 30px; background: rgba(0,100,0, .2); pointer-events: none; } #overlay-passing { top: 0; background: rgba(100,0,0, .2); }
<a href="#">Link blocked</a><br> <a href="#" title="hoverable">Link available</a><br> <a href="#" title="hoverable">Link available</a><br> <div id="overlay-blocking"></div> <div id="overlay-passing"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks very much! The original application for this has passed away, however this is awesome. How cross browser is it?
Answered my own question... It works in IE8, Opera 11.11 and Firefox 4. Do you have any other test cases?
IE6/7 - ok, chrome/safari5 (win) - ok
Not true! caniuse.com/#search=pointer-events , I tested on opera 11.11 and it is not working, maybe your test-case is broken
@Jakob Cosoroaba, that's right. pointer-events is not a fully-cross-browser feature. i had to use js as fallback(
2

I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.

OTHER OPTION

You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.

Improve this answer

5 Comments

Thinking about it, I can split the image. Thanks!
No, we don't split up images in 2011. Use redundant elements if you must, but don't split up your image, there's no need.
@reisio - Yeah I was a little hasty in my response - splitting images didn't work :-(
@JamWaffles Did you try the image maps as well?
No - image maps are impractical for this situation as the underlaying content is animated via. jQuery. Thanks for the suggestion though :-)
1

Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?

Improve this answer

2 Comments

Re: Your edit: In that case, nope, the answer I found isn't helpful for you. I think the solution will have to involve JavaScript click detection. Do you want to go down that road?
No. It sounds like a dark and scary road :-( Well, not that dark and scary, but not elegant.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.