html - anchor 悬停和相邻 sibling

Question

想象一下这个 html 结构:

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

我想在 p 标签 之后隐藏 div 中的所有图像，为此，我简单地使用以下代码:

p + div {display:none;}

但是当我之前尝试通过将 anchor 悬停在 p 标签 中来显示这些图像时，使用它的方式不同:

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

如果我只使用 p 代替:

p:hover + div {display:block;}

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

因为 a 是 p 标签 的子标签，所以相邻的兄弟“+”不起作用？

Answer 1

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

正确。 div是 p 的 sibling , 而不是 a .

你可以设置pointer-events对于 p到“无”，和pointer-events对于 a到“自动”。

然后您可以使用您的工作 p:hover + div代码，但它会像它只为 anchor 工作一样:

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>