CoverT 46: pointer-events With Overrides

codeInteractive Code Example

According to MDN, the pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. However, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on the parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

This can be useful if you need some customization of under what conditions mouse events fire for an element.


<div class="my-container">
const divs = document.querySelectorAll('.my-container div');

divs.forEach(div => {
  div.addEventListener('mouseenter', function () {
.my-container {
  pointer-events: none;
  width: 100px;

.my-container div {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;

.my-container div:nth-of-type(2) {
  pointer-events: auto;