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

你可以用JavaScript来做

2022年:

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

div:has(button:hover) {}

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

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

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

这个解决方案完全取决于设计，但如果你有一个父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: "";
}

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

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

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

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

这里是小样。

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

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

如前所述，“没有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;
}