Question

我有一组具有相同类的div（如果它更容易，它们不必具有相同的类）。理想情况下，我想要的是当用户将鼠标悬停在其中一个div上时，其他div（每个div中的背景图像）都会变为灰色，以便将焦点放在当前悬停的o div上。如果是正在改变的div正在改变我会没事的，但我真的不知道如何解决这个问题。某种兄弟选择器？我宁愿只使用css，如果解决方案不向后兼容，我很高兴。

到目前为止，这是我的代码。提前谢谢！

.box:hover (SELECT ALL OTHER .BOX) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%); }

编辑：我意识到我可以给每个盒子一个不同的类，然后说当盒子1盘旋时，盒子2,3,4等变成灰色，然后为每个盒子做..但这似乎很多简单的代码。

Answer 1

以下解决方案仅在您的元素相邻时才有效，如导航栏。也许这不是你的情况，但它可以帮助别人。必须说它是跨浏览器的CSS2。

将<div>包裹在容器内：

<div class="container">
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
</div>

并使用它来控制:hover

.target {
    background-color: #444;
}
.container {
    float: left;
}
.container:hover .target {
    background: #bbb;
}
.container .target:hover {
    background: #444;
}

它正在运作here

Answer 2

没有兄弟组合器可以让你选择另一个元素的所有其他兄弟姐妹。在原子上，您可以使用.box:not(:hover)表示此问题，如其他答案所示，但您不能选择所有其他.box:not(:hover)元素相对于一个.box:hover元素父节点。

你可以在兄弟组合器+和~中间做这件事，但他们只关注一个元素后面的兄弟姐妹：

.box:hover ~ .box {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

这意味着如果你悬停第二个方框，那么只有第三个和第四个方框会灰显但不是第一个方框。

没有办法用CSS选择前面的兄弟姐妹。目前，实现目标的唯一方法是在悬停特定框时使用JavaScript在其他框上切换样式。

Answer 3

使用:not CSS3 选择器

div.box:not(:hover) { ... }

如果这是你的意思......

如何定位同一类的所有div除了在div上盘旋？

3 个答案: