javascript - 如何给被文本包围的链接加下划线？

Question

我需要在悬停时被文本包围的 anchor 链接下划线。

我正在寻找类似于下面的结果，但没有定位来自 id 或类的任何链接，因为它对所有链接都是相同的。

如何使用 css(如果没有，则使用 javascript)为被文本包围的链接添加下划线 可能吗？

a{
  text-decoration: none;
}

a#withText:hover{
 text-decoration: underline; 
}

<span> <a href="#"> Alone link </a> <span>
<br/>

<span> Text around <a id="withText" href="#"> Text surrounded link </a> Text around </span>

Answer 1

您可以使用 span > a:hover 这将定位作为 span 的直接子级的所有 a。

a{
  text-decoration: none;
}

span > a:hover{
 text-decoration: underline; 
}

<a href="#"> Alone link </a>
<br/>

<span> Text around <a id="withText" href="#"> Text surrounded link </a> Text around </span>