Make overlay background click-through-able

Question

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

@Knu: The overlay div is, like the thing it is overlaying, a block level element. Making a span `inline-block` or something might work. — Bojangles, Jan 28 '11 at 12:33

tibalt · Accepted Answer · 2015-12-21T21:31:32.980

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>

edited Dec 21 '15 at 21:31

answered May 27 '11 at 07:06

tibalt

15,201
1
29
22

Thanks very much! The original application for this has passed away, however this is awesome. How cross browser is it? – Bojangles May 27 '11 at 12:53
Answered my own question... It works in IE8, Opera 11.11 and Firefox 4. Do you have any other test cases? – Bojangles May 27 '11 at 12:56
IE6/7 - ok, chrome/safari5 (win) - ok – tibalt May 30 '11 at 09:28
Not true! http://caniuse.com/#search=pointer-events , I tested on opera 11.11 and it is not working, maybe your test-case is broken – Jakob Cosoroaba Dec 07 '11 at 15:52
@Jakob Cosoroaba, that's right. pointer-events is not a fully-cross-browser feature. i had to use js as fallback( – tibalt May 10 '12 at 09:18
pointer-events was the key. thanks! – Tommy Thompson Jan 23 '18 at 03:05

score 2 · Answer 2 · answered Jan 27 '11 at 21:47

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.

answered Jan 27 '11 at 21:47

Marnix

6,384
4
43
78

Thinking about it, I _can_ split the image. Thanks! – Bojangles Jan 27 '11 at 22:20
1

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 Jan 28 '11 at 01:21
@reisio - Yeah I was a little hasty in my response - splitting images didn't work :-( – Bojangles Feb 01 '11 at 18:22
@JamWaffles Did you try the image maps as well? – Marnix Feb 01 '11 at 22:31
No - image maps are impractical for this situation as the underlaying content is animated via. jQuery. Thanks for the suggestion though :-) – Bojangles Feb 02 '11 at 17:02

score 1 · Answer 3 · edited May 23 '17 at 12:17

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?

edited May 23 '17 at 12:17

Community

1
1

answered Jan 27 '11 at 21:48

Scott Cranfill

1,046
5
13

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? – Scott Cranfill Jan 28 '11 at 13:46
No. It sounds like a dark and scary road :-( Well, not that dark and scary, but not elegant. – Bojangles Feb 01 '11 at 18:21

Make overlay background click-through-able

3 Answers3

Linked