CODEWITHSUNDEEP
javascriptvue.jsvuejs2
asanas
asanas

Reputation: 4280

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

I am using VueJS. I have a scenario where I have some content inside a div with class explainer (multiple paragraphs).

My challenge is to allow a user to hover over any word inside the div. On hover, the entre sentence should get highlighted in a different background, and then the information about the hovered-over word and the highlighted sentence should be shown in another div.

If I had pre-defined word/phrase to hover over, then it was easy, as I could use the @mouseover event to trigger this. But in my case, it's a full paragraph, and I don't know which word/sentence the user is going to click.

I've created a fiddle to illustrate this:

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

Upvotes: 0

Views: 919

Answers (1)

Jim B.
Jim B.

Reputation: 4714

I just implemented a way to do this by dividing your text into <span> tags.

(made it a little prettier)

http://jsfiddle.net/zt2s41yj/

This example isn't super pretty, but it does work and you can see the mechanism. You'd probably want to build the template from the raw text as well.

UPDATE: here's a version that does both sentence and word highlighting, generating the spans automatically from the 'content' data field.

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

Upvotes: 1

Related Questions