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

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

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

考虑使用CSS 属性的

spread-radius

box-shadow

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

div {    overflow: hidden;   }a:hover {    box-shadow: 0 0 0 1000px red;  }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>