Using just pointer-events and :hover

Compatibility of pointer-events: caniuse.com. Tested working on IE 11 and Edge, Chrome and Firefox.

• Set pointer-events: none on the div. The div will now ignore :hover.

  div {
      pointer-events: none;
  }
  

• Set the parent background to change on hover

  div:hover {
      background: #F00;
  }
  

• Set pointer-events: auto on the child so that the hover event is triggered only when the child is hovered

  div > a {
      pointer-events: auto;
  }
  

This works because the div is hovered when its child is hovered, and pointer events are activated with auto only on that child. Otherwise the parent ignores its hover pseudo-class.

Example

Note: IE 11 and Edge require the child element to be display: inline-block or display: block for pointer events to work.

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
  display: inline-block;
}

<div>
  <h1>Heading</h1>
  <a href="#">Anchor Text</a>
</div>