鼠标悬停单个div时，如何修改其余所有div的字体颜色？

同容器内生效：纯CSS方案 #

受限于CSS选择器的作用范围，这种方案只能让当前.b所在的.a容器内的其他.b改变字体颜色。

修改后的CSS代码：

.a {
  margin-bottom: 1.5em;
}

.b {
  margin-bottom: 0.5em;
  display: flex;
  color: #000; /* 默认字体颜色 */
}

/* 父容器.a被hover时，所有子元素.b变为浅灰色 */
.a:hover .b {
  color: #999;
}

/* 当前hover的.b保持原字体颜色，同时显示绿色背景 */
.a .b:hover {
  background-color: green;
  color: #000;
}

.c {
  flex: 1;
}

全局所有.b生效：JavaScript方案 #

如果需要跨所有.a容器实现效果，就得用JS监听hover事件，统一控制所有.b元素的样式。

第一步：新增CSS类标记非悬停元素 #

.a {
  margin-bottom: 1.5em;
}

.b {
  margin-bottom: 0.5em;
  display: flex;
  color: #000;
  transition: color 0.2s; /* 添加上过渡动画，效果更顺滑 */
}

.b:hover {
  background-color: green;
}

/* 非悬停状态的.b元素样式 */
.b.not-hover {
  color: #999;
}

.c {
  flex: 1;
}

第二步：添加JS事件监听 #

// 获取页面上所有class为b的元素
const allB = document.querySelectorAll('.b');

allB.forEach(item => {
  // 鼠标移入时，给其他.b添加not-hover类
  item.addEventListener('mouseenter', () => {
    allB.forEach(el => {
      if (el !== item) {
        el.classList.add('not-hover');
      }
    });
  });

  // 鼠标移出时，移除所有.b的not-hover类
  item.addEventListener('mouseleave', () => {
    allB.forEach(el => {
      el.classList.remove('not-hover');
    });
  });
});

完整HTML代码（包含JS） #

<div class="a">
  <div class="b">
    <div class="c">
      <p>one</p>
    </div>
    <div class="c">
      <p>two</p>
    </div>
    <div class="c">
      <p>three</p>
    </div>
  </div>
  <div class="b">
    <div class="c">
      <p>four</p>
    </div>
    <div class="c">
      <p>five</p>
    </div>
    <div class="c">
      <p>six</p>
    </div>
  </div>
</div>

<div class="a">
  <div class="b">
    <div class="c">
      <p>un</p>
    </div>
    <div class="c">
      <p>deux</p>
    </div>
    <div class="c">
      <p>trois</p>
    </div>
  </div>
  <div class="b">
    <div class="c">
      <p>quatre</p>
    </div>
    <div class="c">
      <p>cinq</p>
    </div>
    <div class="c">
      <p>six</p>
    </div>
  </div>
</div>

<script>
const allB = document.querySelectorAll('.b');

allB.forEach(item => {
  item.addEventListener('mouseenter', () => {
    allB.forEach(el => {
      if (el !== item) {
        el.classList.add('not-hover');
      }
    });
  });

  item.addEventListener('mouseleave', () => {
    allB.forEach(el => {
      el.classList.remove('not-hover');
    });
  });
});
</script>

内容的提问来源于stack exchange，提问作者soulitude