CSS - Hover passes through elements to activate hover on covered element

Question

I have a page layout involving a lot of position absolute and z-indexing, so there are a lot of elements that are overlapping one another.

One of the elements just contains text and it hovers over top of a lot of other things.

Underneath that element there are several elements that have CSS Hover Pseudo Classes applied.

When the mouse passes over the element containing text, I would like for somehow the Element underneath to respond to the presence of the mouse and activate the pseudo class styles.

Is there any way to style an element so it allows the hover to pass through it to any elements underneath?

This wouldn't be too hard with JavaScript, but I would rather not go that route at the moment in order to keep things as simple as they can be. I'll be complicating things with JavaScript enough later.

Thanks

P.S. - I'm using HTML5 and CSS3 already, so I would have no problem with solutions utilizing these newer standards.

Answer 1

you can use pointer-events: none; to the element on top:

div {     width   : 200px;     height  : 200px;     float   : left;     cursor  : pointer;     border  : 1px green solid;  }    div + div:hover { background: #a1a6c8; }    div:first-child {     pointer-events : none;     position       : absolute;     top            : 100px;     left           : 100px;     border         : 1px green solid;     background     : #c1c6c8;  }

  <div> on top of all: hover me </div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>          

as you can see, when you hover the element on the top the element behind is activated. For more info about this property: https://developer.mozilla.org/en/CSS/pointer-events

Answer 2

Also, something that people may find useful is that you can re-enable pointer events on child elements of the pointer-events:none element by setting them to pointer-events:auto explicitly. This doesn't seem to be well documented and turns out to be very useful. – slicedtoad

@slicedtoad's comment was hugely useful for me, so I think it deserves a full answer. If you set pointer-events: none to a parent, you'll disable the events for it's children. HOWEVER, if you set point-events: auto to the children, they will work again.

This also works when the children have a negative z-index, and therefore become unresponsive to pointer-events.