CSS Only: How Do You Change the Style of the Elements You're NOT Hovering Over?

This one is kind of a finicky CSS trick, but the solution is pretty simple.

Hover over any of these squares

The Code

HTML

<div class="container">
  <div class="card" ></div>
  <div class="card" ></div>
  <div class="card" ></div>
  ...
</div>

SCSS

.container {
  pointer-events: none;
}
.container:hover .card {
  /* unique-style */
  opacity: 0.2;
}
.card {
  pointer-events: all;
  /* default-style */
  opacity: 1;
}
.container:hover .card:hover {
  /* default-style */
  opacity: 1;
}