除了悬停在div上之外，如何定位同一类的所有div？答案

【问题标题】：How to target all divs of the same class except for hovered over div?除了悬停在div上之外，如何定位同一类的所有div？
【发布时间】：2012-09-21 15:24:24
【问题描述】：

我有一组具有相同类的 div（如果这样做更容易，它们不必具有相同的类）。理想情况下，我想要的是当用户将鼠标悬停在其中一个 div 上时，其他 div（每个都有背景图像）都变成灰色以将焦点放在当前悬停的 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 等会变灰，然后对每个盒子都这样做.. 但这似乎很多一些简单的代码。

【问题讨论】：

如果你不反对 JavaScript 和 jQuery，它可以用于将事件绑定到元素集合（通过 id、通过 css 类、任何许多其他选择器），例如悬停并且使您能够提供回调，并使用 JavaScript 以您想要的方式操作 DOM 中的任何元素。
阅读6.6.1. Dynamic pseudo-classes
两者都干杯，我想我将不得不为此使用 javascript。

标签： css css-selectors

【解决方案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

【讨论】：

这仅适用于目标元素之间没有边距的情况。否则将指针放在容器上也会改变目标元素。
非常感谢，辛苦了。对我来说幸运的是它们是相邻的:)

【解决方案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%);
}

这意味着如果您将鼠标悬停在第 2 个框上，则只有第 3 和第 4 个框会变灰，而第 1 个则不会。

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

【讨论】：

感谢您的回答，非常有帮助。看起来 css 非常接近解决这个问题（使用上面的代码），但我想我将不得不使用 javascript。

【解决方案3】：

使用:not CSS3选择器

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

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

【讨论】：