锚悬停和相邻的兄弟

Question

想象一下这个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是Rewrite Base的孩子，相邻的兄弟＆＃34; +＆＃34;不起作用吗？

Answer 1

  

由于它是p标签的孩子，相邻的兄弟“+”不起作用？

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

您可以将pointer-events的{​​{1}}设置为“无”，将p的{​​{1}}设置为“自动”。

然后，您可以使用正在运行的pointer-events代码，但它的行为就像它只适用于锚点一样：

a

p:hover + div