如何在悬停子元素时设置父元素的样式？
我知道，不存在一个CSS父母选择器 ，但是当悬停一个没有这样的选择器的子元素时，是否可以对父母元素进行样式化？
举一个例子：考虑一个删除按钮 ，这个按钮在悬停的时候会突出显示即将被删除的元素：
<div> <p>Lorem ipsum ...</p> <button>Delete</button> </div> 通过纯CSS的方式，当鼠标在按钮上方时如何更改本节的背景颜色？
那么以前这个问题问了很多次，简短的回答是：纯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}
很明显，在大多数情况下，这个技巧依赖于绝对定位的使用，使得兄弟姐妹与父母具有相同的大小，并且仍然让孩子出现在父母中。
有时候，为了选择一个特定的元素，有必要使用一个更合适的选择器路径，如这个小提琴在树形菜单中多次实现这个技巧。 真的很不错。
我知道这是一个古老的问题，但我只是设法这样做，没有一个伪小孩（而是一个伪包装）。
如果将父级设置为没有pointer-events ，然后将pointer-events设置为auto的子级div ，则该div工作:)
请注意， <img>标记（例如）并不能解决问题。
还要记住为其他具有自己的事件监听器的孩子设置pointer-events为auto ，否则他们将失去点击功能。
标记：
<div_parent> <div_child></child> </parent>
和CSS：
.div_parent { pointer-events: none; } .div_child { pointer-events: auto; } .div_parent:hover { opacity: 0.5; }
编辑：
正如暗影精灵注意到：值得一提的是，这不适用于IE10及以下版本。 （FF和Chrome的旧版本，请看这里 ）
没有用于选择所选小孩的父母的CSS选择器。
你可以用JavaScript来做
如前所述“没有用于选择所选小孩的父母的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
