css - CSS中是否有任何伪选择器来选择一个字母：悬停？

Question

我想用 CSS 重现这个：

http://jsfiddle.net/g32Xm/

$(function(){
    var text = $('h2').text();
    var atext = text.split("");
    var newText = '';
    for(var i=0; i< atext.length; i++){
        newText += '<span>'+ atext[i]+'</span>';
    }
    $('h2').html(newText);

});

CSS

 h2 span:hover{

        position:relative;
        bottom:3px;
    }

是否有任何不涉及 Javascript 的解决方法？并且（我忘了提）没有将跨度放在 html 中

提前致谢

Answer 1

CSS 通常应用于选择器，而不是文本节点中的单个字母。使用现代 CSS，您可以使用:first-letter伪元素，但据我所知，这与您可以对单个字符进行样式设置差不多。唯一的方法是将每个字符包装在一个单独的元素中（span可能是 a ）并使用它。

所以，为了简短的回答：到目前为止，不，没有办法只用 CSS 来做到这一点。

Answer 2

您最终可以手动将每个字符包装在跨度中，并避免以这种方式使用 javascript：

HTML

<h2>
<span>M</span><span>a</span><span>n</span><span>d</span><span>a</span><span>r</span><span>i</span><span>n</span><span>a</span> 
<span>L</span><span>i</span><span>m</span><span>ó</span><span>n</span>
</h2>

CSS

h2 > span:hover{

    position:relative;
    bottom:3px;
}

JSFiddle 示例