CSS hover 伪类 word per word

Question

我在CSS中使用

p:hover {background-color: grey;}

它改变了整个段落。当我将鼠标悬停在段落中的任何单词上时，我希望它能更改该段落中的一个单词。我该怎么做？

Answer 1

如果您不想手动换行每个单词，您可以使用 jQuery 为您完成，如下所示:

var p = $('p');
var text = p.text().split(' ');
for( var i = 0, len = text.length; i < len; i=i+1 ) {
    text[i] = '<mark>' + text[i] + '</mark>';
}
p.html(text.join(' '));

然后你制作你的 CSS 如下:

p mark:hover {background:yellow}

这是演示:http://jsfiddle.net/zL2Yw/1/

不幸的是，没有纯 CSS 解决方案。