javascript - VueJS : Highlight an entire sentence when you hover over a word in a paragraph

Question

我正在使用VueJS。我有一个场景，在带有类 explainer 的 div 中包含一些内容(多个段落)。

我的挑战是允许用户将鼠标悬停在 div 内的任何单词上。悬停时，中间的句子应该在不同的背景中突出显示，然后有关悬停的单词和突出显示的句子的信息应该显示在另一个 div 中。

如果我有预定义的单词/短语来悬停，那么这很容易，因为我可以使用 @mouseover 事件来触发此操作。但就我而言，这是一个完整的段落，我不知道用户将点击哪个单词/句子。

我创建了一个 fiddle 来说明这一点:

http://jsfiddle.net/rus72fzn/1/

Answer 1

我刚刚实现了一种方法，将您的文本划分为 <span>标签。

(让它更漂亮一点)

http://jsfiddle.net/zt2s41yj/

这个例子不是很漂亮，但它确实有效，你可以看到其中的机制。您可能还想从原始文本构建模板。

更新:这是一个同时突出显示句子和单词的版本，从“内容”数据字段自动生成跨度。

http://jsfiddle.net/jmbldwn/nvsLpxfh/