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

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

另一种更简单的“替代”方法（针对一个老问题）..
将元素放置为 siblings 并使用：

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 4

没有用于选择选定子项的父级的 CSS 选择器。

你可以用 JavaScript 做到这一点

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

这在 Sass 中非常容易做到！不要为此深入研究 JavaScript。 sass 中的 & 选择器正是这样做的。

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