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

Question

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

举一个例子：考虑一个删除按钮，当悬停时会突出显示要删除的元素：

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

这些不同的路径允许一些不错的可能性。例如，在问题中的示例中释放此技巧会导致 this fiddle ：

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

显然，在大多数情况下，这个技巧取决于使用绝对定位来给予兄弟姐妹与父母相同的大小，并且仍然让孩子出现在父母中。

有时需要使用更合格的选择器路径才能选择特定元素，如 this fiddle 所示，它在树状菜单中多次实现该技巧。非常好。

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>

修改
正如Shadow Wizard所指出的那样：值得一提的是，这对IE10及以下版本无效。 （旧版FF和Chrome也是如此，请参阅here）

Answer 3

没有用于选择所选孩子的父母的CSS选择器。

你可以用JavaScript做到这一点

Answer 4

另一种，更简单的方法（对于一个老问题）..
将元素放置为兄弟姐妹并使用：

Adjacent Sibling Selector（+） 要么 General Sibling Selector（~）

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

Demo Fiddle here

Answer 5

如前所述，“没有用于选择所选孩子的父母的CSS选择器”。

所以你要么：

• use a CSS hack as described in NGLN's answer
• 使用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;
}

Answer 6

此解决方案完全取决于设计，但如果您有一个父div，您希望在悬停孩子时更改背景，则可以尝试使用::after / ::before模仿父级

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS：

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

See a full fiddle example here

Answer 7

为那些不需要纯CSS解决方案的人提供的简单jquery解决方案：

    $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    });

.hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div>

Answer 8

这在萨斯非常容易！不要为此深入研究JavaScript。 ＆amp; sass中的选择器确实如此。

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand