在孩子悬停时，更改父容器的背景颜色（仅CSS）

Question

这是一个常见的问题。它几乎总是被关闭，作为以下问题的重复项：是否有CSS父选择器？

重复项很好地指出了CSS不能定位父html" target="_blank">元素。但是，它对于原始问题几乎没有提供任何指导，而原始问题可能会在XY问题中陷入困境。

在这种情况下…

悬停孩子时如何更改父母的背景颜色？

…至少有一种CSS解决方案可以解决该问题。

<div>

  <a href="#">Anchor Text</a>

</div>

Answer 1

尽管无法使用CSS选择父元素，但是您可以使用另一种方法来完成任务。

您希望在悬停孩子时更改父母的背景颜色。

考虑使用CSS 属性的spread-radius值。box-shadow

通过创建巨大的展开半径，您可以更改周围区域的颜色（在视觉上与父元素没有什么不同）。

div {

    overflow: hidden;              /* 1 */

}



a:hover {

    box-shadow: 0 0 0 1000px red;  /* 2 */

}



/* non-essential decorative styles */

div {

  height: 150px;

  width: 150px;

  border: 1px dashed black;

  display: flex;

  justify-content: center;

  align-items: center;

}


<div>

  <a href="http://www.stackoverflow.com/">Anchor Text</a>

</div>

笔记：

1. overflow: hidden 限制孩子的盒子阴影
2. 的box-shadow值如下所示：

<box-shadow> : <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

• 偏移量x〜距元素的水平距离
• 偏移y〜距元素的垂直距离
• blur-radius 〜使阴影越来越大且透明
• spread-radius 〜使阴影扩大（不褪色）

在这种情况下，前三个值无关紧要。

您需要的是spread-radius使它增长很多，然后用修剪容器overflow: hidden。

如果容器中还有其他元素怎么办？

<div>
  <h2>Hello</h2>
  <a href="http://www.google.com">Anchor Text</a>
</div>



div {

    overflow: hidden;

}

a:hover {

    box-shadow: 0 0 0 1000px red;

}

div {

  height: 150px;

  width: 150px;

  border: 1px dashed black;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}


<div>

  <h2>Hello</h2>

  <a href="http://www.stackoverflow.com/">Anchor Text</a>

</div>

您可以将a z-index应用于同级。

h2 { z-index: 1; }

而且，由于该元素恰好是在这个例子中Flex容器，它们不需要被定位为z-index来工作。

h2 { z-index: 1; }



div {

    overflow: hidden;

}

a:hover {

    box-shadow: 0 0 0 1000px red;

}

div {

  height: 150px;

  width: 150px;

  border: 1px dashed black;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}


<div>

  <h2>Hello</h2>

  <a href="http://www.stackoverflow.com/">Anchor Text</a>

</div>