在子元素悬停时，更改父容器的背景颜色（仅限CSS） [英] On hover of child, change background color of parent container (CSS only)

问题描述

这是一个常见的问题。它几乎总是立即关闭，与此问题重复：是否有CSS父选择器？

复制代码很好地指出了父元素不能用CSS定位。但它对原始问题提供了很少或没有指导，这可能会出现在 XY问题中。

在此特殊情况下...

如何更改父级的背景颜色徘徊孩子？

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

 < div> < a href =＃>锚定文字< / a>< / div>  

b

解决方案

虽然您无法使用CSS选择父元素，但您可以使用其他方法完成此任务。

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

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

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

  div {overflow：hidden ; / * 1 * /} a：hover {box-shadow：0 0 0 1000px red; / * 2 * /} / *非基本装饰风格* / div {height：150px; width：150px; border：1px black;显示：flex; justify-content：center; align-items：center;}  

 < div& < a href =http://www.stackoverflow.com/>锚定文本< / a>< / div>  

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 〜使阴影展开（不褪色）

$ b b

在这种情况下，前三个值无关紧要。

你需要的是 spread-radius 增长很多，然后用容器剪切 overflow：hidden 。

---

如果容器中有另一个元素怎么办？

 < div> 
< h2> Hello< / h2> 
< a href =http://www.google.com>锚定文字< / a> 
< / div> 
  

  div {overflow：hidden;} a：hover {box-shadow：0 0 0 1000px red;} div {height：150px; width：150px; border：1px black;显示：flex; flex-direction：column; justify-content：center; align-items：center;}  

 < div& < h2>您好< / h2> < a href =http://www.stackoverflow.com/>锚定文本< / a>< / div>  

div>

您可以将 z-index 应用于同级。

  h2 {z-index：1; } 
  

并且，因为在这个例子中，元素恰好在一个flex容器中，所以他们不需要定位 z-index 工作。 p>

  h2 {z-index：1; } div {height：150px;} div {height：150px;} {font： width：150px; border：1px black;显示：flex; flex-direction：column; justify-content：center; align-items：center;}  

 < div& < h2>您好< / h2> < a href =http://www.stackoverflow.com/>锚定文字< / a>< / div>  

div>

This is a common question. It almost always gets immediately closed as a duplicate of this question: Is there a CSS parent selector?

The duplicate does a good job pointing out that parent elements cannot be targeted with CSS. But it provides little to no guidance for the original question, which may be caught in the XY problem.

In this particular case...

How can the background color of the parent be changed when hovering the child?

...there is at least one CSS solution that may solve the problem.

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

解决方案

Although you can't select parent elements with CSS, you may be able to accomplish the task with another method.

You want the background color of the parent to change when a child is hovered.

Consider using the spread-radius value of the CSS box-shadow property.

By creating a huge spread radius, you can change the color of the surrounding area (which is no different visually than the parent element).

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>

Notes:

1. overflow: hidden to limit child's box shadow
2. the box-shadow values are as follows:

<box-shadow> : <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

• offset-x ~ horizontal distance from element
• offset-y ~ vertical distance from element
• blur-radius ~ makes the shadow increasingly bigger and transparent
• spread-radius ~ makes the shadow expand (without fading)

In this case, the first three values don't matter.

What you need is for the spread-radius to grow a lot, then have it clipped by the container with overflow: hidden.

---

And what if there's another element in the container?

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

You can apply a z-index to the sibling.

h2 { z-index: 1; }

And, because the elements happen to be in a flex container in this example, they don't need to be positioned for z-index to work.

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>

这篇关于在子元素悬停时，更改父容器的背景颜色（仅限CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！