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; }