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

如果要使用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();
    }); 
});

Answer 2

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

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

然而，我启动了playing around in JSFiddle in Chrome，似乎在同时使用它们时出现了问题。甚至在分解锚元素和它的默认下划线之前，我就用普通的LIs尝试过了(它们没有链接)：

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

和

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

它们都不起作用，尽管

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

确实行得通。

您可能只需要使用自定义类将前几个字母包装在span中，而不是依赖于::first-letter。

Answer 3

这是一个纯CSS解决方案，可以在webkit浏览器中使用，比如Chrome和Safari。

http://jsfiddle.net/mqchen/cQCSp/

经过一些尝试，我终于得到了一个在Firefox4中也可以工作的纯CSS解决方案：

http://jsfiddle.net/mqchen/cQCSp/3/

CSS：

.list a.underline {
    display: block;
    text-decoration: none;
}
.list li .underline:first-letter {
    text-decoration: underline;
}
.list li:not(:hover) .underline:first-letter {
    text-decoration: none;
}