悬停时突出显示文本块中的单个字词 [英] Highlight an individual word within a text block on hover

问题描述

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

Lorem ipsum dolor sit amet，consectetur adipiscing elit。毛蕊Aenean fermentum imperdiet augue，et venenatis lectus semper vel。 Phasellus faucibus nulla in quam egestas eleifend。 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在accumsan直径。 Maecenas ut urna id velit posuere auctor in vel dui。 Aenean consectetur dui in leo faucibus sed feugiat dui blandit。 in accumsan diam vitae erat volutpat volutpat aliquam nunc euismod。 Vivamus viverra lorem nulla。 Quisque justo quam，adipiscing sit amet auctor non，laoreet sit amet nisl。 Donec euismod lorem ac mi dictum volutpat。 Donec ligula mi，varius ac auctor at，sollicitudin id elit。在导管索状ipsum nec consectetur。

如果我将鼠标光标悬停在第一个单词Lorem上，变为粗体（例如）。基本上，我想只是光标所在的文本，在鼠标悬停时添加一个CSS属性，然后删除那个CSS属性，当光标不再在该单词的顶部。

我可以想到这样做的唯一方法是在每个单词之间添加一个< span> 标签。这是唯一的办法吗？有更有效的方法，或者jQuery的mouseover事件只在标签内工作？

.com /> 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>不要打破我的心。< / p> 
  

成为：

 code>< p class =word_split> 
< span class =word1>不要< / span> 
< span class =word2> break< / span> 
< span class =word3> my< / span> 
< span class =word4>心。< / span> 
< / p> 
  

然后您可以使用以下CSS：

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

In javascript/jQuery, is there a way to identify a word in a text block/paragraph? For example, say I have the following paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit interdum fermentum. Aenean fermentum imperdiet augue, et venenatis lectus semper vel. Phasellus faucibus nulla in quam egestas eleifend. 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 at accumsan diam. Maecenas ut urna id velit posuere auctor in vel dui. Aenean consectetur dui in leo faucibus sed feugiat dui blandit. In accumsan diam vitae erat volutpat volutpat aliquam nunc euismod. Vivamus viverra lorem nulla. Quisque justo quam, adipiscing sit amet auctor non, laoreet sit amet nisl. Donec euismod lorem ac mi dictum volutpat. Donec ligula mi, varius ac auctor at, sollicitudin id elit. In auctor sodales ipsum nec consectetur. Sed lacinia varius nibh vitae vulputate.

If I hover my mouse cursor over the first word, "Lorem", I would like it to become bold (for example). Basically, I would like just the text that the cursor is over to have a CSS property added to it on mouseover, then have that CSS property removed when the cursor is no longer on top of that word.

The only way I can think of doing this is to add a <span> tag between each and every word. Is this the only way? Is there a more efficient way perhaps, or does jQuery's mouseover event only work within tags? Can it work in identifying text blocks?

解决方案

This seems like a good task for http://letteringjs.com/

You can set it up to create the spans for you at word barriers.

JSFiddle with your example: http://jsfiddle.net/3HdKH/

From their tutorial: https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29

Using:

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

This

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

Becomes:

<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>

Then you can use the following CSS:

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

这篇关于悬停时突出显示文本块中的单个字词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！