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

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.

Answer 3

This is a Javascript solution which the question doesn't call for, but this page is connected to this sort of hover problem search query:
I have a case where this arrow button is sitting on top of an item that I want to remain hovered in grey. More specifically, the item is in a list of items that each will have various buttons appear on top when hovered over.
So with jQuery events:
var selectedItem;
var lastSelectedItem;
$(".item").mouseover(function(){
$(this).addClass("item-hovered") // css class with hover styles
selectedItem = $(this);
});
$(".item").mouseleave(function(){
$(this).removeClass("item-hovered")
selectedItem = null;
lastSelectedItem = $(this);
});
$(".button").mouseover(function(){
selectedItem = lastSelectedItem;
selectedItem.addClass("item-hovered")
});
"lastSelectedItem" is used to differentiate between moving off item onto whitespace and off item onto button, so selectedItem holds a value only if the mouse is either over an item or its corresponding button.