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

Question

这是一个常见的问题.它几乎总是立即关闭作为这个问题的副本:是否有CSS父选择器？

副本很好地指出父元素不能用CSS作为目标.但它对原始问题几乎没有提供指导,这可能会在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>

• offset-x~元素的水平距离
• offset-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>

你可以申请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>

Answer 2

如果您只想更改父元素的背景，另一种方法是使用伪元素伪造它，请考虑以下结构：

.div1 {
  position: relative;
  padding:2em;
  color:white;
}
a {
  color:white;
  font-family:sans-serif;
}
a:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:red;
  z-index:-1;
  transition:background .5s linear;
}
a:hover:before {
  background:purple;
}

<div class="div1">
 <div class="div2">
  <h2>Here Some Title</h2>
  <a href="#">Hover Me</a>
 </div>
</div>

Answer 3

使用公正pointer-events和:hover

指针事件的兼容性： caniuse.com。经过测试，可以在IE 11和Edge，Chrome和Firefox上运行。

• pointer-events: none在div上设置。div现在将忽略:hover。

  div {
      pointer-events: none;
  }
  

• 设置父背景在悬停时更改

  div:hover {
      background: #F00;
  }
  

• 设置pointer-events: auto子项，以便仅在将子项悬停时才触发悬停事件

  div > a {
      pointer-events: auto;
  }
  

之所以起作用，是因为div在其子项悬停时已悬停，并且auto仅在该子项上激活了指针事件。否则，父级将忽略其悬停伪类。

例

注意： IE 11和Edge要求子元素为display: inline-block或display: block，指针事件才能起作用。

div {
    pointer-events: none;
}

div:hover {
    background: #F00;
}