使用jQuery或CSS在悬停列表中为锚标记的第一个字母加下划线

Question

我试图在列表中的每个项目上悬停链接的第一个字母.我已经尝试过CSS first_letter选择器,但所有这一切都强调了第一个项目的第一个字母.

这是清单:

<ul class="list">
   <li><a class="underline" href="Lingua%20Franca.html">Lingua Franca</a></li>
   <li><a class="underline" href="Within%20Within.html">Within Within</a></li>
   <li><a class="underline" href="Kind%20Pockets.html">Kind Pockets</a></li>
</ul>

我试过这个以及它的许多变化:

a.underline:hover:first-letter{
  text-decoration: underline;
}

Answer 1

嗯,::first-letter是一个伪元素,而不是伪类,所以它需要两个冒号:

http://www.w3.org/TR/css3-selectors/#first-letter

但是,我开始在Chrome中的JSFiddle中玩游戏,看起来有些问题一起使用它们.甚至在考虑锚元素及其默认下划线之前,我尝试使用vanilla LIs(其中没有链接):

li::first-letter:hover {
 text-decoration: underline;   
}

和

li::first-letter:hover {
 text-decoration: underline;   
}

但是,他们都没有工作

li::first-letter {
 text-decoration: underline;   
}

确实有效.

您可能只需要使用自定义类而不是依赖来包装跨度中的第一个字母::first-letter.

Answer 2

如果你想用 jQuery 来实现，只要锚点的内容不复杂就可以。

http://jsfiddle.net/rEcx7/1/

$(function(){
    $("#stuff li a").hover(function(){
        var thisHtml=$(this).html();

        $(this).html("<span style='text-decoration: underline;'>"+thisHtml.substring(0,1)+"</span>"+thisHtml.substring(1));
    },function(){
       $(this).find("span").contents().unwrap();
    }); 
});