How To Mouse Hover Change Colour BUT for each word indiviudally?

[aspwlf]

Hello, hope your day hasn’t been stressful so far?

Say I have text on my website

For example

Hello this is a test

I understand I can change the WHOLE sentence to change colour on Mouse Hover

But how would i go about say I wan to make the word Hello change to green on mouse hover
the word this to pink on mouse hover
the word test to red

etc
etc

all indiviudal

so each WORD has its own hover, not the whole lot changes at once

Would it be possible to look into this, please? thank you sincerely for responding to me, Your kindness is appreciated. I hope this is not a hassle for you and Have a Wonderful day ahead!

[ezduriez]

One solution is:

Insert each word you want to change color in a separate text than you group all texts in a row group.
Each text you insert the condition you want when hovered.

[doug.burden]

Install the Toolbox plugin.

Next use the HTML element to display your text with this <p id="myParagraph" onmouseover="changeColor()">Some text here someone will hover to see a diff color</p>

Then in the tool box, run javascript

 ` function changeColor() {
    // Get the element that contains the word "color"
    var element = document.getElementById("myParagraph");

    // Split the text of the element into individual words
    var words = element.innerHTML.split(" ");

    // Find the index of the word "color" in the array of words
    var index = words.indexOf("color");

    // If "color" was found, change its color
    if (index >= 0) {
      words[index] = '<span style="color: red;">color</span>';
    }

    // Join the words back together and set the inner HTML of the element
    element.innerHTML = words.join(" ");
  }

[oliviercoolen]

You could also do this natively with the new “wrapped horizontally” function for RGs.

1. create a RG with a text element, with the settings below:
   

   

2. set your text element to ‘fit width to content’

3. split your data source by a space

4. set a conditional on the text element when it’s hovered.
   

   

---

When I hover “Laboris”, this is the result: