0

我有一组具有相同类的 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 等变灰，然后为每个盒子做这件事.. 但这似乎有很多代码简单的。

4

3 回答 3

3

以下解决方案仅在您的元素相邻时才有效，例如导航栏。也许这不是你的情况，但它可以帮助别人。必须说它是跨浏览器的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;
}

它在这里工作

于 2012-09-21T15:48:16.103 回答
1

没有兄弟组合器可以让您选择另一个元素的所有其他兄弟。如其他答案所示，您可以原子地表示这一点.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 个框会变灰，而第一个框不会变灰。

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

于 2012-09-21T15:29:18.577 回答
0

使用:not CSS3选择器

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

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

于 2012-09-21T15:27:07.440 回答