Question

我有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）：悬停所有其他人正在改变背景。但对于 .box：nth-child（2）：悬停，只有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;
}

在徘徊于第n个孩子时改变其他孩子（1）

2 个答案: