javascript - 使用 :hover to modify the css of another class?

Question

当悬停在另一个类的元素上时，是否有一种方法可以修改一个类的 css，仅使用 css？

类似于:

.item:hover .wrapper { /*some css*/ }

只有 'wrapper' 不在 'item' 内，它在其他地方。

我真的不想为这么简单的事情使用 javascript，但如果必须，我该怎么做？这是我失败的尝试:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";

每个类只有一个元素。不知道为什么他们在制作模板时不使用 ID，但就是这样，我无法更改。

[编辑]

这是一个菜单。每个菜单元素都有一个不同的类。当您将鼠标悬停在该元素上时，右侧会弹出一个子菜单。它就像一个叠加层，当我使用“检查元素”工具时，我可以看到整个网站的 html 在子菜单处于事件状态时发生了变化(这意味着除了子菜单什么都没有)。我称之为“包装器”的类具有控制子菜单背景的 css。在我看来，这两个类之间确实没有任何联系。

Answer 1

您可以采用两种方法，使悬停元素影响 (E) 另一个元素 (F):

1. F 是 E 的子元素，或者
2. F 是 E 的后兄弟(或兄弟的后代)元素(因为 E 出现在标记/DOM 中之前 F):

为了说明这些选项中的第一个(F 作为 E 的后代/ child ):

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}​

为了演示第二个选项，F 是 E 的兄弟元素:

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}​

在此示例中，如果 .wrapper 是 .item 的直接兄弟(两者之间没有其他元素)，您也可以使用 .item:悬停 + .wrapper.

JS Fiddle demonstration .

引用资料:

• CSS 2.1 selectors, at the W3.org .