悬停时突出显示文本块中的单个单词

Question

在javascript/jQuery中,有没有办法识别文本块/段落中的单词？例如,假设我有以下段落:

Lorem ipsum dolor坐下来,精致的adipistur elit.Mauris suscipit interdum fermentum.Aenean fermentum imperdiet augue,et venenatis lectus semper vel.在quam egestas eleifend中的Phasellus faucibus nulla.Cras tristique augue eget libero tristique condimentum.Mauris eget diam eget risus feugiat rutrum.Duis placerat lorem quis augue semper porttitor.Nullam iaculis dui feugiat erat condimentum rutrum.在累积直径的Sed.Maecenas ut urna id velit posuere auctor in vel dui.Aeoan consectetur dui在leo faucibus sed feugiat dui blandit.在accumsan diam vitae erat volutpat volutpat aliquam nunc euismod.Vivamus viverra lorem nulla.Quisque justo quam,adipiscing坐在amet auctor non,laoreet sit amet nisl.Donec euismod lorem ac mi dictum volutpat.Donec ligula mi,varius ac auctor at,sollicitudin id elit.在auctor sodales ipsum nec consectetur.Sed lacinia varius nibh vitae vulputate.

如果我将鼠标光标悬停在第一个单词"Lorem"上,我希望它变为粗体(例如).基本上,我想只是光标所在的文本在鼠标悬停时添加了一个CSS属性,然后当光标不再位于该单词之上时删除该CSS属性.

我能想到这样做的唯一方法是<span>在每个单词之间添加一个标签.这是唯一的方法吗？是否有更有效的方法,或jQuery的鼠标悬停事件只能在标签内工作？它可以用于识别文本块吗？

Answer 1

这对http://letteringjs.com/来说似乎是个不错的任务

您可以将其设置为在字障碍处为您创建跨度.

JSFiddle与你的例子:http://jsfiddle.net/3HdKH/

从他们的教程:https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29

使用:

$(document).ready(function() {
  $(".word_split").lettering('words');
});

这个

<p class="word_split">Don't break my heart.</p>

变为:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

然后你可以使用以下CSS:

.word_split span:hover {
    font-weight:bold;
}