Question

我想用CSS重现这个：

$(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）并使用它。

所以，简短地回答一下：截至目前，不，只有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 example

CSS中是否有任何伪选择器可以选择一个字母：悬停？

2 个答案: