悬停时更改其他 children nth-child(1)

Question

我有 4 divs (.box) 是 children of one parent 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>

我想做的是：当我悬停任何一个 child 时，所有其他 children 应该改变。

首先我尝试了这个方法：

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

但我不能使用它，因为框不是 parent 的框，它们是同一级别的元素。

然后我尝试使用同级选择器：

.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;
}

但问题是同级选择器仅适用于下一个同级（下一个 child），在我的示例中，一切正常 .box:nth-child(1):hover 所有其他人都在改变背景。但是对于 .box:nth-child(2):hover 只有 3 和 4 更改样式，因为没有先前的兄弟选择器，所以 3 和 4 的结果相同。

有什么方法可以只用 CSS 还是我必须使用 jQuery？

Answer 1

.cont:hover > * {
    background:#ccc;   // make all childern of .cont #ccc
}
.cont:hover > *:hover {
    background:#333;   // revert the hovered child to #333
}

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/

Answer 2

将背景颜色移到外部 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;
}

悬停时更改其他 children nth-child(1)

Change other children when hovering nth-child(1)

html

css

jquery

css-selectors