html - 悬停子元素时如何设置父元素的样式？

Question

我知道不存在 CSS parent selector , 但是在没有这样的选择器的情况下悬停子元素时是否可以设置父元素的样式？

举个例子:考虑一个删除按钮，悬停时会突出显示即将删除的元素:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

通过纯CSS，如何在鼠标悬停在按钮上时，改变这一段的背景颜色？

Answer 1

我知道这是一个老问题，但我只是设法在没有伪 child (但伪包装器)的情况下这样做。

如果您将父级设置为没有 pointer-events , 然后是一个 child div与 pointer-events设置为 auto , 它有效:)
注意 <img>标签(例如)不起作用。
还记得设置 pointer-events至 auto对于其他有自己的事件监听器的 child ，否则他们将失去点击功能。

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 也一样，参见 here )