Question

我需要在悬停时用文本围绕的锚链接加下划线。

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

如何使用css（或javascript，如果没有）为文本包围的链接添加下划线有可能吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果a始终在span范围内，您可以像这样定位：

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

这会定位a内的所有span。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

据我所知，没有办法处理纯文本节点＆＃34;在css选择器中。我去JS，你可以很容易地检查链接的文本是否等于它的父元素的所有文本。

这是一个使用jquery的小提琴，但你也可以用普通的javascript来完成。

＆＃13;

$("a").each(function(){
  if($(this).text().trim() == $(this).parent().text().trim()){
    //This link is the only content of parent item, so...
    $(this).addClass('no-underline');
  }
});

＆＃13;

a{text-decoration:none}
a:hover{text-decoration:underline}
a.no-underline:hover{text-decoration:none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>text arround <a href="#here">the link</a></p>
<p>text arround <a href="#here">the link</a> on both side</p>
<p><a href="#here">the link</a> with text after it</p>
<p> <a href="#here">a link alone (whitespaces arround)</a> </p>

＆＃13;

如何为文本包围的链接加下划线？

3 个答案: