Flexbox布局卡片组：实现单张卡片悬停时其余所有卡片样式变更的CSS方案问询

嘿，我来帮你搞定这个问题！你现在遇到的是CSS兄弟选择器的局限性——~只能选中当前元素之后的同级卡片，没法影响前面的那些。不过有两种实用的方法可以实现你想要的「悬停某张卡片时，其余所有卡片都变色/变暗」的效果：

方法1：纯CSS方案（简洁高效） #

这个方法不需要写JavaScript，利用父容器的hover状态配合:not选择器就能实现：

修改你的CSS代码： #

首先，给父容器和卡片添加必要的事件触发设置，然后替换掉你原来的.new:hover~.new规则：

#page3container {
  height: 70%;
  width: 70%;
  background: rgba(25, 25, 25, 0.8);
  position: absolute;
  margin: 0;
  left: 15%;
  top: 22%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 15px;
  /* 确保容器能接收hover事件 */
  pointer-events: auto;
}

/* 关键规则：容器hover时，所有.new卡片都变色，除了当前悬停的那张 */
#page3container:hover .new:not(:hover) {
  background: red; /* 换成你想要的背景色/变暗样式 */
  opacity: 0.7; /* 可选：用透明度实现变暗效果，更自然 */
  transition: all 0.5s ease; /* 平滑过渡动画 */
}

.page3card {
  height: 40%;
  width: 30%;
  background: rgb(50, 71, 139);
  border-radius: 15px;
  box-shadow: 0 0 5px rgb(50, 71, 139);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* 确保卡片能触发hover */
  pointer-events: auto;
}

/* 保留你原本的卡片hover放大效果 */
.new:hover {
  box-shadow: 0 0 7px rgb(88, 78, 215);
  transition: 0.5s;
  height: 42%
}

/* 你的其他原有CSS样式保持不变 */
.card3Title { height: 50px; margin-top: 2%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
.card3Title h3 { font-family: 'Play'; width: 80%; color: #d83a3a; display: flex; flex-direction: column; justify-content: center; height: 100%; margin: 0; padding-left: 5%; height: 50px; background: red; }
.card3Number { width: 20%; }
.card3Text { color: white; font-family: 'Play'; padding: 5px; text-align: center; }
.new { background: rgb(88, 78, 215); overflow: hidden; transition: 0.5s; }
.cardnumber { height: 100%; width: 45%; text-align: left; color: rgba(255, 255, 255, 1); font-size: 19vw; display: flex; flex-direction: column; justify-content: space-evenly; }
.cardcontent { height: 100%; width: 60%; display: flex; flex-direction: column; justify-content: flex-start; }
.cardcontent h1 { color: white; margin: 0; text-align: center; height: 40%; padding: 0; margin-top: 5%; }
#inner { height: 60%; width: 100%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; position: relative; }
#inner img { width: 8vw; height: 8vw; margin: 5%; margin-bottom: 0; object-fit: contain; }
.cardcontent h1 { width: 100%; font-size: 2.2vw; }

原理： #

当你把鼠标放到容器内的任何卡片上时，父容器#page3container会触发hover状态，我们用:not(:hover)排除当前正被悬停的卡片，这样剩下的所有卡片都会应用你设置的变色/变暗样式，完美解决了兄弟选择器只能选后面元素的问题。

方法2：JavaScript方案（灵活可控） #

如果你需要更复杂的交互（比如不同的悬停动画、多状态切换），用JS来实现会更灵活：

添加JS代码： #

// 获取所有带new类的卡片
const cards = document.querySelectorAll('.page3card.new');

// 给每个卡片绑定悬停事件
cards.forEach(card => {
  // 鼠标悬停时
  card.addEventListener('mouseenter', () => {
    cards.forEach(otherCard => {
      // 如果不是当前悬停的卡片，添加样式类
      if (otherCard !== card) {
        otherCard.classList.add('card-dimmed');
      }
    });
  });

  // 鼠标离开时
  card.addEventListener('mouseleave', () => {
    // 移除所有卡片的样式类
    cards.forEach(otherCard => {
      otherCard.classList.remove('card-dimmed');
    });
  });
});

对应的CSS类： #

.card-dimmed {
  background: red; /* 自定义你的变暗/变色样式 */
  opacity: 0.7;
  transition: all 0.5s ease;
}

原理： #

通过监听每个卡片的mouseenter和mouseleave事件，遍历所有卡片，精准地给除了当前悬停卡片之外的其他卡片添加或移除样式类，完全不受CSS选择器的限制。

小提示： #

• 纯CSS方案更适合简单的样式切换，代码少易维护；JS方案适合需要复杂逻辑的场景。
• 可以调整transition的参数，让样式变化更平滑自然。
• 如果你的卡片有重叠，记得检查pointer-events属性，确保hover事件能正常触发。

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