テキストに囲まれたリンクに下線を付ける方法は？

Question

私は、ホバー上にテキストで囲まれたアンカーリンクに下線を引く必要があります。

私は以下のような結果を探していますが、すべてのリンクで同じであるため、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

ごaは、あなたがこのようにそれをターゲットにすることができspan以内に必ずある場合：

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

これはspan内のすべてのa年代をターゲットにしています。

Answer 2

span > a:hoverを使用すると、spanという直接の子としてのすべてのaを対象とします。

Answer 3

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>

は、私の知る限りでは、CSSセレクタで、純粋な「テキストノード」に対処する方法はありません。私はあなたが簡単にリンクのテキストがその親要素のすべてのテキストと等しいかどうかを確認することができるJSに行くだろう。

ここではjqueryを使用しているフィドルですが、プレーンなjavascriptでも行うことができます。

$("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'); 
 
    } 
 
});

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

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