95

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.

1
  • do you really need the text box to be on top of the boxes you would like to add hover classes to?
    – Tom
    Mar 16, 2012 at 14:26

3 Answers 3

195

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

5
  • 2
    Sweet! - pointer-events: none; was exactly what I was looking for.
    – jdavis
    Mar 16, 2012 at 14:50
  • 6
    Note; this will also block JavaScript event bindings on the element. Apr 16, 2013 at 2:22
  • 11
    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.
    – DanielST
    Oct 23, 2014 at 14:07
  • jsfiddle.net/7aeDt/87 You may have to add a listener explicitly to the child too. not sure.
    – DanielST
    Oct 23, 2014 at 14:13
  • 8
    Is the a way to trigger both divs:hover effect? Dec 4, 2018 at 19:59
19

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.

0

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.

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.