CSS Hover 兄弟姐妹，但不是一个答案

【问题标题】：CSS Hover siblings but not oneCSS Hover 兄弟姐妹，但不是一个
【发布时间】：2020-12-07 18:47:17
【问题描述】：

下面的示例应该，当悬停粉红色框时，所有其他粉红色框都会消失（不透明度：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>

【问题讨论】：

标签： css hover children

【解决方案1】：

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>

【讨论】：

很棒的人。在这个例子中效果很好，但是在我的实际工作中，我在蓝色 div :/ 中有一个按钮需要点击。知道如何解决这个问题吗？

【解决方案2】：

如果您可以使用 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>

【讨论】：