html - CSS 悬停在邻居上以切换属性

Question

这就是我想要实现的 - 下面的演示。
工作:

将鼠标悬停在红色 div 上会将背景设置为红色👍

将鼠标悬停在红色 div 上会将绿色 div 的背景设置为绿色👍

将鼠标悬停在蓝色 div 上会将蓝色 div 的背景设置为蓝色 👍

不工作:

将鼠标悬停在蓝色 div 上会将绿色 div 的背景设置/保留为白色 👎

是否有我忽略的仅 CSS 解决方案？或者我必须为此使用 JS 吗？

.root {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  background: white;
}

.secondary {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: white;
}

.root:hover {
  background: red;
}

.root:hover .main,
.main:hover {
  background: green;
}

.secondary:hover {
  background: blue;
}

<div class="root">
  <div class="main"></div>
  <div class="secondary"></div>
  <div class="secondary"></div>
</div>

Answer 1

对于提供的示例，您可以使用通用兄弟组合器 ~定位所有 .main任何蓝色 ( .secondary ) div 之后的元素。这意味着您需要更改标记，以便 .main出现在您的 .secondary 之后.然后，您可以更改 div 的 flex-direction，以便绿色 div 首先出现，如下所示:

.root {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row-reverse;
}

.main {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  background: white;
}

.secondary {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: white;
}

.root:hover {
  background: red;
}

.root:hover .main,
.main:hover {
  background: green;
}

.secondary:hover {
  background: blue;
}

.secondary:hover ~ .main {
  background: white;
}

<div class="root">
  <div class="secondary"></div>
  <div class="secondary"></div>
  <div class="main"></div>
</div>

如果蓝色 div 的顺序很重要，您可以设置 order: -1在您的 .main div 而不是反转整个行顺序:

.root {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  background: white;
  order: -1;
}

.secondary {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: white;
}

.root:hover {
  background: red;
}

.root:hover .main,
.main:hover {
  background: green;
}

.secondary:hover {
  background: blue;
}

.secondary:hover ~ .main {
  background: white;
}

<div class="root">
  <div class="secondary">1</div>
  <div class="secondary">2</div>
  <div class="main"></div>
</div>