Pointer events playground

by jonahe

HTML

<div class="pointer-events auto">
    1
  <section class="pointer-events none">
      2
    <article class="pointer-events none">
        3
      <button class="pointer-events auto">
          4 (button)
      </button>
    </article>
  </section>
</div>
<div class="overlay pointer-events none">
</div>

CSS

:root {
  --border-width: 1px;
}

div, section, article, button, p, h2 {
  padding: 15px;
  background-color: rgba(243, 0, 0, 0.1);
  border: var(--border-width) solid transparent;
}

button {
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

*:hover {
  border: var(--border-width) dashed black;
  box-sizing: border-box;
}

.pointer-events.auto {
  pointer-events: auto;
}

.pointer-events.all {
  pointer-events: all;
}

.pointer-events.none {
  pointer-events: none;
}