html - 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>