Javascript 悬停影响非'；t兄弟姐妹

以下情况：
我在一个容器里有三个div。如果我悬停其中一个div，其他两个div应该会改变它们的外观
这是一把小提琴，显示了我目前的处境：

正如您所看到的，它只影响DOM中悬停元素之后出现的元素。

有没有办法最好不使用JavaScript实现所需的行为

HTML:

---

问题是当前CSS不支持以前的同级选择器，因此您尝试（

~

）只会导致选择悬停元素的下一个同级

但是，您可以通过以下方式模拟行为：

#container:hover > :not(:hover) {
    background-color: blue;
}

---

演示：

在我正在处理的“real”项目中，每个div中都有一个元素，其中包含文本。如果一个div悬停，则只应显示该div中的->我想将其他div设置为“display:none”。类似于此的内容？您是否查看过此内容：@DPac此选择器为我提供了第一个div的最佳功能（即尝试和错误）。@GobSmack此解决方案不是我要寻找的，因为当您尝试将鼠标悬停在其他元素上时，它会遇到相同的困难。它也不适用于DOM中悬停元素之前的元素。虽然这个答案非常好，但它没有说明如何根据悬停的

div

更改

背景色。原始问题试图在第一个问题悬停时将其他问题设置为
黑色
，如果第二个问题悬停，则设置为
蓝色
，最后一个问题设置为
紫色
。在我的实际项目中，此功能很好。但是看看是否有可能设置不同的颜色会很有趣。@SUBHUMAN我不认为用当前版本的CSS会有多么简单。为了节省时间和空间，您必须使用JavaScript来完成这项工作，因为CSS解决方案可能会变得庞大而不灵活。
#one {
    width:30px;
    height:30px;
    border:1px solid red;
}

#two {
    width:30px;
    height:30px;
    border:1px solid red;
}

#three {
    width:30px;
    height:30px;
    border:1px solid red;
}

#one:hover ~ div {
    background-color:black;
}

#two:hover ~ div {
    background-color:blue;
}

#three:hover ~ div {
    background-color:purple;
}

#container:hover > :not(:hover) {
    background-color: blue;
}