锚悬停和相邻兄弟姐妹

Question

想象一下这个 html 结构：

<p><a></a></p>
<div><a><img></a></div>

我想在 p tag 之后隐藏 div 中的所有图像，为此，我简单地使用此代码：

p + div {display:none;}

但是当我之前尝试通过将 anchor 悬停在 p tag 中来显示这些图像时，使用此方法无法以相同的方式工作：

p > a:hover + div {display:block;}

如果我只使用 p：

p:hover + div {display:block;}

它有效，但它不是我假装的。

因为 a 它是 p tag 的 child，相邻的兄弟“+”不起作用？

Answer 1

Since a it's a child of p tag, adjacent sibling "+" doesn't work?

正确。 div 是 p 的兄弟，而不是 a。

您可以将 p 的 pointer-events 设置为 "none"，将 a 的 pointer-events 设置为 "auto"。

然后您可以使用您的工作 p:hover + div 代码，但它的行为就像它只对锚点有效：

p + div {
  display:none;
}

p {
  pointer-events: none;
}

a {
  pointer-events: auto;
}

p:hover + div {
  display: block;
}

<p>
  <a href="#">This is an anchor.</a> <br>
  Lorem ipsum et cetera.
</p>
<div>
  Cool picture:
  <a>
    <img src="http://lorempixel.com/50/50">
  </a>
</div>

锚悬停和相邻兄弟姐妹

Anchor hover and adjacent sibling

html

css

hover