使用: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。实际上，我看不到两个类别之间的任何联系。

- Kesarion

---

你不想使用 getElementsByClassName，因为它并不被所有浏览器支持。 - Amberlamps

不，CSS不允许非嵌套元素相互影响。您需要使用Javascript来实现此功能。 - Marc B

"别的地方"：确切在哪里？如果.item是前一个兄弟元素，你可以使用.item:hover ~ .wrapper { ... }。 - Fabrizio Calderan

你最好把菜单的HTML代码展示给我们，这样我们就可以直接判断是否可以选择它。 - BoltClock

Answer 1

有两种方法可以让一个元素(E)的悬停状态影响到另一个元素(F):

1. F 是 E 的子元素，或者
2. F 是 E 后代中的后续兄弟元素（或兄弟元素的后代元素）（即在标记/ DOM 中 E 出现在 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演示。

参考文献：

• CSS 2.1选择器，在W3.org上。

- David Thomas

---

你在2015年帮助了我。 :D - user4051844

你让我的一天过得很愉快。非常感谢！ - Zain Ul Abideen

Answer 2

目前在CSS中不可能实现，除非你想选择一个子元素或同级元素（这在其他答案中是微不足道的并已描述）。

对于所有其他情况，您将需要使用JavaScript。 jQuery和类似Angular的框架可以相对容易地解决此问题。

[编辑]

借助新的CSS（4）选择器:has()，您将能够针对父元素/类进行定位，从而使CSS-Only解决方案在不久的将来成为可能！（CSS4.Rocks的:has()指南）和（MDN Web Docs的:has()指南）。

- Kesarion

---

在简要了解了 :has 后，让我觉得它只在当前作用域内操作子元素。如果要使用 :has 定位到父元素，应该怎么做呢？ - Marcus Riemer

@MarcusRiemer 这是我之前提出的一个比较老的问题，当时我的描述可能不太清晰，但是以下类似的代码会对我有所帮助：.common_parrent:has(.item:hover) .content {/*...*/}。 - Kesarion

Answer 3

你可以通过制作以下CSS来实现。在根元素悬停时，你可以在此处放置所需的CSS以影响子类。

.root:hover    .child {
   
}

- Mohammad Gabr

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
}

- robrich

---

他们说：“只有'wrapper'不在'item'里面，它在别的地方。” - jeffjenx

Answer 5

你可以这样做。
当鼠标悬停在 .item1 上时，它会改变 .item2 元素。

.item1 {
  size:100%;
}

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

.item2{
  border: solid 1px blue;
}

- TJZ

---

这个语法对我不起作用... "在样式规则中缺少选择器。" 你能发一个可行的例子吗？ - Jason D

@JasonD 我也是，语法也不起作用。 - Gabe Tucker