我知道这是一个老问题，但我只是设法做到这一点，没有一个伪子（但伪 Package 器）。
如果您将父对象设置为没有pointer-events，然后将pointer-events的子对象div设置为auto，则可以正常工作：）
请注意，<img>标记（例如）并不起作用。
另外，对于其他拥有自己的事件侦听器的子进程，请记住将pointer-events设置为auto，否则它们将失去单击功能。

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

编辑：

如Shadow Wizard所述：值得一提的是，这对IE10及以下版本不起作用（老版本的FF和Chrome也一样，请看这里）

这个问题之前已经被问过很多次了，简短的典型答案是：它不能由纯CSS完成。它的名称是：* 层叠样式表 * 仅支持层叠方向的样式，不支持向上。

但是在大多数希望达到这种效果的情况下，比如在给定的例子中，仍然有可能使用这些级联特性来达到预期的效果。

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

诀窍是给予兄弟节点和父节点相同的大小和位置，并给兄弟节点而不是父节点设置样式，这看起来就像父节点被设置了样式一样！
现在，如何设置兄弟的样式？
当子对象悬停时，父对象也悬停，但兄弟对象不悬停。兄弟对象也是如此。这总结了三种可能的CSS选择器路径来设置兄弟对象的样式：

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

这些不同的路径允许一些很好的可能性，例如，在问题中的例子上释放这个技巧会得到**this fiddle**：

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

显然，在大多数情况下，这个技巧依赖于使用绝对定位来给予兄弟节点与父节点相同的大小，并且仍然让子节点出现在父节点中。
有时候为了选择一个特定的元素，需要使用一个更合适的选择器路径，如**this fiddle**所示，它在树型菜单中多次实现了这个技巧。

另一个，更简单的“替代”方法（对一个老问题）。
将元素放置为兄弟并用途：

Adjacent Sibling Selector（+）或General Sibling Selector（~）

<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;
}

Demo Fiddle here .

不存在用于选择所选子节点的父节点的CSS选择器。
你可以用JavaScript来实现

如前所述，“没有CSS选择器用于选择所选子对象的父对象”。
因此，您可以：

• use a CSS hack as described in NGLN's answer
• 使用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;
}

型

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

<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: "";
}

See a full fiddle example here

2022年：

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

div:has(button:hover) {}

下面是一个展示原始命题的片段：
x一个一个一个一个x一个一个二个x
参见浏览器支持here。在撰写本文时，所有主流浏览器都支持它--除了Firefox，它的实验性实现仍然存在缺陷。

这在Sass中非常容易做到！不要为此钻研JavaScript。Sass中的&选择器正是这样做的。
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand