42

Possible Duplicate:
Passing mouse clicks through an overlaying element <div>

Is it possible to click the link below the red square without javascript? The red div doesn't need to be clickable.

enter image description here

http://jsfiddle.net/efortis/LNwHV/

#bottom{
 width: 100px;
 height: 100px;
 background-color: orange;
}

#top{
  width: 50px;
  height: 50px;
  position: absolute;
  left:0;
  top:0;
  background-color: rgba(255,0,0,.5);
 }
Community
  • 1
  • 1
Eric Fortis
  • 16,372
  • 6
  • 41
  • 62

1 Answers1

98

The CSS method to do this is pointer-events: none

See: http://jsfiddle.net/LNwHV/1/

Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)

To support old versions of IE, you'll have to use JavaScript as a fallback.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 2
    Then it's not a solution. Doesn't even work in IE10. – wouterds Jan 17 '13 at 21:26
  • 3
    @WouterDS: Yeah, it's rather annoying that it doesn't work in even IE10. Unfortunately, it's all CSS has to offer. If you need to support IE, you'll probably have to use JavaScript as in the last link in my answer. – thirtydot Jan 18 '13 at 11:05
  • 2
    No one cares about IE anymore, lol. It's dead. – TetraDev Aug 27 '20 at 18:05