当悬停子元素时，如何设置父元素的样式？

Question

当悬停子元素时，如何设置父元素的样式？

我知道不存在CSS父选择器但是，在没有这样一个选择器的情况下，在子元素中悬停时，是否有可能为育儿元素设置样式呢？

给出一个例子：考虑删除按钮当悬停时将突出显示即将被删除的元素：

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

使用纯CSS，当鼠标在按钮上时，如何改变这部分的背景色？

Answer 1

这个问题以前问过很多次，简单的典型答案是：它不能用纯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}显然，在大多数情况下，这一技巧取决于使用绝对定位来给兄弟姐妹与父级相同的大小，并且仍然允许孩子出现在父级中。有时，为了选择特定的元素，必须使用更限定的选择器路径，如这把小提琴它在一个树菜单中多次实现这个技巧。真的很不错。

Answer 2

我知道这是个老问题，但我只是在没有伪子(但是伪包装器)的情况下成功地做到了这一点。如果将父级设置为“no”，则pointer-events，然后是个孩子div带着pointer-events设为auto，它起作用：)请注意<img>标记(例如)不起作用。也要记住pointer-events到auto对于有自己的事件侦听器的其他子程序，否则它们将失去单击功能。div.parent {&nbsp;&nbsp;&nbsp; &nbsp; pointer-events: none;}div.child {&nbsp; &nbsp; pointer-events: auto;}div.parent:hover {&nbsp; &nbsp; background: yellow;}&nbsp; &nbsp;&nbsp;<div class="parent">&nbsp; parent - you can hover over here and it won't trigger&nbsp; <div class="child">hover over the child instead!</div></div>

Answer 3

另一个，简单方法(对一个老问题).将元素放置为兄弟，并使用：相邻同胞选择器 (+)或普通同胞选择器 (~)<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;}