使用 :hover 修改另一个类的css？

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 的后代/子代）：

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

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

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

在本例中，如果.wrapper 是.item 的直接兄弟（两者之间没有其他元素），您也可以使用.item:hover + .wrapper。

JS Fiddle demonstration.

参考资料：

• CSS 2.1 selectors, at the W3.org。

Answer 2

目前在 CSS 中是不可能的，除非您想选择一个子元素或同级元素（在此处的其他答案中有所描述）。

对于所有其他情况，您将需要 JavaScript。 jQuery 和 Angular 等框架可以相对轻松地解决这个问题。

[编辑]

使用新的 CSS (4) 选择器 :has()，您将能够定位父元素/类，从而在不久的将来使纯 CSS 解决方案可行！

Answer 3

您可以通过制作以下 CSS 来做到这一点。您可以将悬停在根目录上时需要影响子类的 css 放在这里

.root:hover    .child {
   
}

Answer 4

如果 .wrapper 在 .item 中，并且如果您不在 IE 6 中或者 .item 是一个 a 标签，那么您拥有的 CSS 应该可以正常工作。你有证据表明不是吗？

编辑：

CSS 本身不能影响其中不包含的内容。要做到这一点，请像这样格式化您的菜单：

<ul class="menu">
    <li class="menuitem">
        <a href="destination">menu text</a>
        <ul class="menu">
            <li class="menuitem">
                <a href="destination">part of pull-out menu</a>
... etc ...

你的 CSS 是这样的：

.menu .menu {
    display: none;
}

.menu .menuitem:hover .menu {
    display: block;
    float: left;
    // likely need to set top & left
}

Answer 5

您可以这样做。
当悬停到.item1 时，它会改变.item2 元素。

.item1 {
  size:100%;
}

.item1:hover
{
   .item2 {
     border:none;
   }
}

.item2{
  border: solid 1px blue;
}