revert-layer

by ShaCP

HTML

<div>

</div>

CSS

div {
  width: 400px;
  height: 400px;
}

@layer base {
  div {
    background-color: red;
  }
}

@layer hover {
  div:hover {
    background-color: blue;
  }

  body.no-hover :hover {
    all: revert-layer;
  }
}

/* notice how the blue background color is not applied because revert-layer is making it go back to the value in the previous later (red) */

JavaScript

document.body.classList.add('no-hover');