JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<div id="words"><span>I</span> <span class="verb">like</span> to <span class="verb">ride</span> <span>my</span> <span class="noun">bicycle</span> <span>every</span> <span class="noun">day</span>.</div>
<br>
<span class="hoverable" data-words="noun">Nouns</span>
<span class="hoverable" data-words="verb">Verbs</span>

CSS

.selected {color: red}

JavaScript

function selectWords(name) {
    let words = document.getElementById("words").children;
    for (let i = 0; i < words.length; i++) {
        if (words[i].className === name) {
            words[i].className += " selected";
        } else {
            words[i].className = words[i].className.split(" ")[0];
        }}}

let hoverables = document.getElementsByClassName("hoverable");

for (let i = 0; i < hoverables.length; i++) {
    hoverables[i].addEventListener("mouseenter", function() {
        selectWords(this.dataset.words);
    });
    hoverables[i].addEventListener("mouseleave", function() {
        selectWords("empty");
    });}