一尘不染

在孩子悬停时,更改父容器的背景颜色(仅CSS)

html

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

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

在这种情况下…

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

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

<div>

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

</div>

阅读 282

收藏
2020-05-10

共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>
2020-05-10