html - anchor 悬停和相邻的兄弟

想象一下这个html结构：

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

我想在div之后隐藏p tag内的所有图像，为此，我只需使用以下代码：

p + div {display:none;}

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

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

如果我仅使用p代替：

p:hover + div {display:block;}

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

由于a是p tag的子级，所以相邻的兄弟“ +”不起作用吗？

最佳答案

由于a是p标签的子元素，因此相邻的同级“ +”不起作用吗？


正确。 div是p的同级，而不是a。

您可以将pointer-events的p设置为“无”，将pointer-events的a设置为“自动”。

然后，您可以使用有效的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>

关于html - anchor 悬停和相邻的兄弟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34099163/