:hover wont work on hovering link inside paragraph

Question

I tried implementing :hover specifically on a link that's inside a paragraph. the p.hop is hidden but when I hover over the link, nothing happens.

.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>`

`.hop` is not next to the a link so that is not working – Minal Chauhan Jun 30 '21 at 04:28 — Minal Chauhan, Jun 30 '21 at 04:28

score 0 · Accepted Answer · answered Jun 30 '21 at 04:30

The + sign selector is used to select the elements that are placed immediately after the specified element but not inside the particular elements.

.hop is not next to the link so that is not working, You can use span next to a tag and get the same result.

.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>

If this answer is helpful to you, please accept the answer – Minal Chauhan Jun 30 '21 at 05:13 — Minal Chauhan, Jun 30 '21 at 05:13

:hover wont work on hovering link inside paragraph

1 Answers1