我有4個div(。框)，它們是一個父div(.續)

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

超文本標記語言

<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:n-child(1):懸停所有其他正在改變背景。但是對于。box:n-child(2):懸停只有3和4改變樣式，因為沒有以前的兄弟選擇器，所以3和4的結果相同。

有沒有辦法只用CSS就能做到這一點，或者我必須使用jQuery？

http://jsfiddle.net/o71hp1q4/

或者更簡單:

/* selects all children of the hovered element that are not hovered theselves */
.cont:hover > *:not(:hover) {  
    background:#ccc;   
}

http://jsfiddle.net/o71hp1q4/1/

移動背景顏色到外面的DIV，然后懸停在它上面改變背景為灰色，同時將活動框懸停在你想要的更深的顏色上。參見示例:

http://jsfiddle.net/fastmover/26pvgbsb/

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