CODEWITHSUNDEEP
css
Qtax
Qtax

Reputation: 33908

Transparent image over an element with :hover

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.

Upvotes: 3

Views: 1606

Answers (1)

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 4

Related Questions