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

Question

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

Leave a Comment Cancel reply