您可以采用两种方法，让悬停的元素影响 ( 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小提琴演示。

参考：

• CSS 2.1 选择器，位于 W3.org。

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

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

[编辑]

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

您可以通过制作以下 CSS 来实现。如果悬停在根上，您可以将影响子类所需的 css 放在这里

.root:hover    .child {
   
}

如果 .wrapper 位于 .item 中，并且您不是在 IE 6 中，或者 .item 是一个标签，那么您拥有的 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
}

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

.item1 {
  size:100%;
}

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

.item2{
  border: solid 1px blue;
}