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

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

我知道这是一个老问题,但我只是设法没有伪子(但是伪包装).

如果你设置父是没有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>

编辑:
正如暗影巫师亲切地指出:值得一提的是这对IE10及以下版本无效.(旧版FF和Chrome也在这里看到)

Answer 3

2022 年：

现在可以仅使用 CSS、使用:has伪类和以下表达式来实现：

div:has(button:hover) {}

这是展示原始提议的片段：

div:has(button:hover) {
  background-color: cyan;      
}

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

浏览器支持通常可以被视为常青树。请参阅此处的支持。

Answer 4

另一个更简单的方法(对于一个老问题)..
将元素放置为兄弟姐妹并使用:

相邻的兄弟选择器(+) 或 通用同级选择器(~)

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

演示小提琴在这里.

Answer 5

没有用于选择所选子项的父级的CSS选择器.

你可以用JavaScript做到这一点

Answer 6

如前所述,"没有用于选择所选孩子的父母的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;
}