css - CSS 悬停每个单词的伪类单词

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 解决方案。

Answer 2

只需用内联元素包装你的话，例如

<p>
  Lorem ipsum sit dolor amet <mark>consectetur</mark> dolor ...
</p>

并在段落悬停时更改其背景颜色

p:hover mark {
   background-color: grey;
}

（随意使用最合适的元素代替<mark>...</mark>）