仅使用`pointer-events`和`:hover`

Question

这是一个常见的问题。它几乎总是立即关闭，作为此问题的副本：Is there a CSS parent selector?

副本很好地指出父元素不能用CSS作为目标。但它对原始问题几乎没有提供任何指导，这可能会在XY problem中找到。

在这种特殊情况下......

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

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

＆＃13;

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

＆＃13;

Answer 1

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

您希望在孩子徘徊时更改父级的背景颜色。

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

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

＆＃13;

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

＆＃13;

<div>
  <a href="http://www.stackoverflow.com/">Anchor Text</a>
</div>

＆＃13;

注意：

overflow: hidden限制儿童的盒子阴影
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>

＆＃13;

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

＆＃13;

<div>
  <h2>Hello</h2>
  <a href="http://www.stackoverflow.com/">Anchor Text</a>
</div>

＆＃13;

您可以将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; }可以使用。

＆＃13;

<div>
  <h2>Hello</h2>
  <a href="http://www.stackoverflow.com/">Anchor Text</a>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

仅使用`pointer-events`和`:hover`

指针事件的兼容性： caniuse.com。测试了IE 11和Edge，Chrome和Firefox。

在div上设置pointer-events: none。 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才能使指针事件生效。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果你只是想改变父元素的背景，另一种方法是用伪元素伪造它，考虑这个结构：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案:

仅使用`pointer-events`和`:hover`

实施例

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

3 个答案:

仅使用pointer-events和:hover

实施例

仅使用`pointer-events`和`:hover`