:hover 无法在段落内悬停 link

Question

我尝试在段落内的 link 上专门实施 :hover。 p.hop 是隐藏的，但是当我将鼠标悬停在 link 上时，没有任何反应。

.hop {
  display: none;
}
a.hop2:hover + .hop {
  display: block;
}

<p>A <a href="https://www.noisli.com" target="_blank" class="hop2">playlist</a> for happy coding.</p>
<p class="hop">Keep your code close but your playlist closer.</p>`

Answer 1

+ 符号 selector 用于 select 紧接在指定元素之后但不在特定元素内的元素。

.hop 不在 link 旁边，所以这不起作用，您可以在 a 标记旁边使用 span 并获得相同的结果。

.hop {
  display: none;
}
a.hop2:hover + .hop {
  display: block;
}

<p>A <a href="https://www.noisli.com" target="_blank" class="hop2">playlist</a> for happy coding.
<span class="hop">Keep your code close but your playlist closer.</span></p>

:hover 无法在段落内悬停 link

:hover wont work on hovering link inside paragraph

html

css

hover