3

Is it possible to have a partially transparent background/image (png logo with shadow) positioned over (using higher z-index or in some other way) some element (menu), without the top image (logo) interfering with the :hover behavior of the partially covered element (menu)?

Currently I have a div with a background image (logo) covering the menu, so the menu elements never get any :hover triggers (and can't be clicked either). I'd like the div to be displayed as it is now, but all mouse related clicks and hover events would pass trough the div to the menu as if the menu was on top.

Qtax
  • 33,241
  • 9
  • 83
  • 121

1 Answers1

3

pointer-events: none is the answer CSS provides to do this.

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

See: http://jsfiddle.net/7D5Jt/

If the browser support for pointer-events is not acceptable, you'll have to use JavaScript.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • great, thanks. How would you use JS to achieve this on Opera/IE? – Qtax Jun 25 '11 at 16:00
  • Found http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie, hope it works for Opera too. – Qtax Jun 25 '11 at 16:06
  • 1
    Good find. I can confirm that both the solutions in that answer work for Opera. – thirtydot Jun 25 '11 at 16:09
  • You should be aware that the javascript dom events also respect pointer-events:none so you cant use this if you want to maintain mouse clicks etc – Tom Elmore Aug 02 '13 at 11:19