我有4个div（.box），它们是一个父div（.cont）的子级
CSS

.cont{
    width: 100%;
    height: auto;
}
.box{
    width: 25%;
    color: #fff;
    text-align: center;
    padding: 50px 0;
    background: #333;
    float: left;
}

HTML

<div class="cont">
    <div class="box">
        aaa
    </div>
    <div class="box">
        aaa
    </div>
    <div class="box">
        aaa
    </div>
    <div class="box">
        aaa
    </div>
</div>

我想做的是：当我悬停在任何一个孩子身上时，其他所有的孩子都应该改变。
首先，我尝试了这个方法：

.box:nth-child(1):hover .box:not(:nth-child(1)) {
    background:#ccc;
}

但是我不能使用这个，因为box不是box的父元素，它们是同一级别的元素。
然后我尝试使用sibiling选择器：

.box:nth-child(1):hover ~ .box:not(:nth-child(1)) {
    background:#ccc;
}
.box:nth-child(2):hover ~ .box:not(:nth-child(2)) {
    background:#ccc;
}
.box:nth-child(3):hover ~ .box:not(:nth-child(3)) {
    background:#ccc;
}
.box:nth-child(4):hover ~ .box:not(:nth-child(4)) {
    background:#ccc;
}

但问题是，兄弟选择器只适用于下一个兄弟（下一个孩子），在我的例子中，所有的工作都完美地为**.box：nth-child（1）：hover所有其他人都在改变背景。但是对于.box：nth-child（2）：hover**，只有3和4更改样式，因为没有以前的兄弟选择器，所以3和4的结果相同。
有没有什么方法可以只使用CSS来实现这一点，或者我必须使用jQuery？