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

Question

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

重复项很好地指出了CSS不能定位父元素。 但这几乎没有提供原始问题的指导，而原始问题可能会被XY问题困扰 。

在这种特殊情况下...

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

...至少有一种CSS解决方案可以解决此问题。

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

Answer 1

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

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

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

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

 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> 

您可以将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

仅使用pointer-events和:hover

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

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

   div { pointer-events: none; } 

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

   div:hover { background: #F00; } 

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

   div > a { pointer-events: auto; } 

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

例

注意： IE 11和Edge要求显示子元素display: inline-block或display: block以使指针事件起作用。

 div { height: 200px; width: 200px; text-align: center; pointer-events: none; } div:hover { background: #F00; } div > a { pointer-events: auto; display: inline-block; } 

 <div> <h1>Heading</h1> <a href="#">Anchor Text</a> </div> 

Answer 3

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

 .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>