在孩子懸停時，更改父容器的背景顏色（僅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>