除了將鼠標懸停在div上之外，如何定位同一類別的所有div？

Question

我有一組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等變灰，然后對每個框進行灰階..但這似乎是很多代碼簡單。

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

在這里工作

Answer 2

沒有同級組合器，您可以選擇另一個元素的所有其他同級。 從原子.box:not(:hover)您可以使用.box:not(:hover)來表示它，如其他答案所示，但是相對於同一父對象中的.box:hover元素，您不能選擇所有其他.box:not(: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) { ... }

如果這是你的意思...