Css 将两个对象悬停在一个对象上

我有一个问题，使两个对象，当我悬停在其中一个，它会改变一个对象。例如，我有对象bar1、bar2和bar3。当我将鼠标悬停在bar1或bar3上时，我想使其更改bar2。这是css代码：

.bar2{
   left:0.5%;
   right:0.5%;
}
.bar1:hover + .bar2{left:5%;}
.bar3:hover + .bar2{right:5%;}

这是我的html代码：

<div style="position:absolute;">
    <div class="bar1">
    </div>
    <div class="bar2">
    </div>
    <div class="bar3">
    </div>
</div>

从这段代码中，我可以通过将鼠标悬停在bar1上来影响bar2，但不能使用bar3。

---

请大家帮帮我。谢谢你的帮助。

你需要做的是：

.bar3:hover+.bar2

或

.bar3:hover~.bar2

仅当

.bar2

在

之后时才会选择
.bar2

元素以不同的顺序排列可能更具语义意义，但在很多情况下（比如这里的您），即使顺序改变，结果在视觉上也是相同的。如果您不能更改顺序以便以这种方式选择内容，那么您将不得不求助于javascript来选择前面的相邻元素

据说css4中有一个父选择器。这很好：）
您应该始终尝试在jsbin.com或类似网站上包含演示，请以可读的方式格式化您的css，并且您不需要包含所有与您的问题不直接相关的css。你让别人帮你变得困难多了。
<div class="bar1">Bar 1
</div>
<div class="bar3">Bar 3
</div>
<div class="bar2">Bar 2
</div>

#one {
  background: red;
}
#two {
  background: white;
}
#three {
  background: blue;
}

#one:hover ~ #two, #three:hover ~ #two {
  background: black;
}