问CSS悬停同级，但不是一个

EN

.row {
  display: flex;
  pointer-events:none; /* disable for parent and all childs */
}

.row div {
  width: 25%;
  height: 100px;
  transition: all 0.6s;
}

.row .rosybrown {
  background-color: rosybrown;
  pointer-events:initial; /* re-enable only for brown elements */
}

.row .blue {
  background-color: lightskyblue;
}

.row:hover .rosybrown:not(:hover) {
  opacity: 0;
}

<div class="row">
  <div class="blue"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
</div>

for (const el of document.getElementsByClassName('rosybrown')) {
      el.addEventListener('pointerover', (e) => {
          e.target.parentElement.classList.add('rosybrown-hovered');
          e.target.classList.add('hovered');
      });
      el.addEventListener('pointerout', (e) => {
          e.target.parentElement.classList.remove('rosybrown-hovered');
          e.target.classList.remove('hovered');
      });
 }

.row {
        display: flex;
      }
      .row div {
        width: 25%;
        height: 100px;
        transition: all 0.6s;
      }

      .row .rosybrown {
        background-color: rosybrown;
      }
      .row .blue {
        background-color: lightskyblue;
      }

      .row.rosybrown-hovered .rosybrown:not(.hovered) {
        opacity: 0;
      }

<div class="row">
  <div class="blue"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
</div>