好吧，这个问题以前被问过很多次，简短的典型答案是:它不能通过纯CSS来完成。它在名称中:级联样式表只支持级联方向的样式化，而不支持向上样式化。

但是在大多数希望达到这种效果的情况下，例如在给定的示例中，仍然有可能使用这些级联特性来达到所需的效果。考虑这个伪标记:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

诀窍是给兄弟元素赋予与父元素相同的大小和位置，并对兄弟元素而不是父元素设置样式。这将看起来像父样式!

现在，如何样式的兄弟?

当悬浮子进程时，父进程也是悬浮的，但兄弟进程不是悬浮的。兄弟姐妹也一样。这总结了三个可能的CSS选择器路径来样式化兄弟:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

这些不同的路径提供了一些很好的可能性。例如，在问题中的例子中使用这个技巧会导致这样的结果:

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

显然，在大多数情况下，这个技巧依赖于使用绝对定位来给兄弟元素与父元素相同的大小，ánd仍然让子元素出现在父元素中。

有时，为了选择一个特定的元素，有必要使用一个更有条件的选择器路径，如本图所示，它在树菜单中多次实现了这个技巧。真的很不错。

没有CSS选择器来选择所选子节点的父节点。

你可以用JavaScript来做

我知道这是一个老问题，但我只是设法在没有伪子程序(而是伪包装器)的情况下做到了这一点。

如果你将父div设置为没有指针事件，然后将子div的指针事件设置为auto，它可以工作:) 注意，<img>标记(例如)并不能做到这一点。 还要记住，对于其他拥有自己的事件侦听器的子节点，将pointer-events设置为auto，否则它们将失去单击功能。

div.parent { pointer-events:没有; ｝ div.child { pointer-events:汽车; ｝ div.parent:{徘徊 背景:黄色; ｝ < div class = "父" > 父母-你可以悬停在这里，它不会触发 <div class="child">改为悬停在child上!< / div > < / div >

编辑: 正如影子向导所指出的:值得一提的是，这将不适用于IE10及以下。(旧版本的FF和Chrome也，见这里)

如前所述，“没有CSS选择器来选择所选子对象的父对象”。

所以你要么:

使用NGLN的回答中描述的CSS hack 使用javascript -和jQuery最有可能

下面是javascript/jQuery解决方案的示例

javascript方面:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

在CSS方面，你会有这样的东西:

.is-hover {
  background-color: red;
}

这在Sass中是非常容易做到的!不要为此钻研JavaScript。sass中的&选择器就是这样做的。

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

另一种更简单的“替代”方法(针对一个老问题)。 将元素放置为兄弟元素并使用:

相邻兄弟选择器(+) 或 一般兄弟选择器(~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

这里是小样。

这个解决方案完全取决于设计，但如果你有一个父div，你想要在悬停子div时改变背景，你可以尝试模仿父div，使用::after /::before。

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

在这里查看完整的小提琴示例

2022年:

这现在只能通过CSS实现，使用:has伪类和下面的表达式:

div:has(button:hover) {}

以下是展示原始命题的片段:

div:(按钮:悬停){ 背景颜色:青色; ｝ < div > <p>Lorem ipsum < >按钮删除> < /按钮 < / div >

点击这里查看浏览器支持。在撰写本文时，所有主要的浏览器都支持它——除了Firefox，它仍然有一个有缺陷的实验性实现。