CSS用于同级元素的样式控制

Question

如果我有3个同级别的div（不是嵌套在另一个里面）。如何在悬停在其中一个div时更改其他div的颜色，且不能使用ID和类。我希望像这样做：

<div id="1" ></div>
<div></div>
<div></div>

还有 CSS：

#1 :hover < body > div
{
    //Here I change the things
}

- user1365010

---

我认为你也需要 JavaScript。 - bitoshi.n

Answer 1

使用通用兄弟选择器。

#yourId:hover ~ div
{
    color:red;
}

注意，id必须以字母开头。 W3 ID属性

示例

- SupremeDud

---

如果我想让之前的div也改变怎么办？ - user1365010

如我在您的新问题中所评论的那样，这是不可能的。 - BoltClock

在这种情况下，您必须使用Petah的答案，因为目前还没有CSS父选择器。 - SupremeDud

这仅适用于悬停元素之后的div，而不是同级别的兄弟元素。 - Janusz 'Ivellios' Kamieński

Answer 2

在它们周围包上一个容器，然后将悬停效果放在容器上。

<div class="wrapper">
    <div class="element">foo</div>
    <div class="element">bar</div>
    <div class="element">baz</div>
</div>

.wrapper:hover .element {
    color: red;
}

例子：http://jsfiddle.net/EB92r/

- Petah

---

这也会更改悬停元素的颜色。这不是答案！ - Janusz 'Ivellios' Kamieński

@Janusz'Ivellios'Kamieński，这真的取决于您的用例，如果您希望它们是不同的颜色，请按照以下步骤操作：http://jsfiddle.net/4un13ftq/ - Petah

这是真的。这取决于情况，但问题是关于在同一级别上选择的元素。我有一个元素在第二行，我想仅在悬停在此特定元素上时显示上方和下方的元素。这不能使用~选择器完成，因为它只会向前查找DOM。您的解决方案也将适用于所有“其他”悬停的元素。但这可能是一个很好的起点。有点hacky，但如果在第一个和最后一个元素上悬停时“禁用”更改，则可以工作。 - Janusz 'Ivellios' Kamieński