javascript - 将鼠标悬停在关键字上会导致句子/段落中的某些单词发光

Question

我想要一个像“我喜欢每天骑自行车”这样的句子/段落。等等，段落上方应该有类别:“名词”，“动词”等。当用户将鼠标悬停在“名词”上时，它应该使“自行车”和“天”发光并悬停在“动词”上应该是“喜欢”和“骑”。我认为也许这可以通过将类设置为“名词”或“动词”以及某种 CSS 和/或 JS 的特定单词周围的 span 标签来完成。谁能帮忙？

需要说明的是，这就是我所说的。

Nouns - Verbs

I like to ride my bicycle every day.

Answer 1

试试下面的代码。我希望它有助于获得基本想法

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

let selects = document.getElementsByClassName("select");

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

.selected {text-shadow: 1px 1px 1px red}

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