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

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 {  

    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>

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