CSS 悬停兄弟姐妹而不是一个

Question

下面的示例应该是，当鼠标悬停在粉红色框上时，所有其他粉红色框都会淡化（不透明度：0）。那已经实现了。但是，当悬停蓝色框时，所有粉红色框都不会受到影响

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

      .row .rosybrown {
        background-color: rosybrown;
      }
      .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>

Answer 1

如果您可以使用 javascript 设置一些基本的事件侦听器，这就很容易做到。但是，我不知道如何使用纯 css 实现此目的。下面是一个如何在 js 中实现它的工作示例！

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>

Answer 2

pointer-events可以做到

.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>

CSS 悬停兄弟姐妹而不是一个

CSS Hover siblings but not one

css

children

hover