<div class="parent">
  <button class="child">My parent has <strong>pointer-events: none</strong><br/>but I still receive mouse events</button>
</div>
.parent {
  width:100%;
  padding: 1rem 0;
  background-color: #cacaca;
  pointer-events: none;
  .child {
    display: block;
    margin: 0;
    border: 0.5rem solid transparent;
    padding: 1rem;
    height: 100%;
    background-color: tomato;
    margin: 0 auto;
    transition: 0.5s all ease;
    pointer-events: auto;
    cursor: pointer;
    &:hover,&:focus {
      cursor: help;
      background-color: lighten(tomato, 5%);
      border-color: currentColor;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.