javascript - 如果我将鼠标悬停在 javascript 中的一篇文章上，则激活一个功能

Question

这是我的html代码：

<div class="TestClass">
    <main>
        <article id="WortArticle">
            <h2>Wort</h2>
            <p>Testparagraph </p>
        </article>

        <article id="WortArticle2">
            <h2>Wort2</h2>
            <p>Testparagraph2 </p>
        </article>

等等...

我有一个功能可以更改每个 h2 和每个 p 元素的内容，但我只希望它在我将鼠标悬停在我网站中的文章上时被激活。我怎样才能做到这一点？

我试过了：

let onArticleHover = document.querySelectorAll(".TestClass");
onArticleHover.addEventListener("mouseover", myfunction());

它有效，但如果我悬停但从一开始就无效。我需要它仅在我将鼠标悬停在文章上时激活。

太感谢了

标签： javascripthtmlfunctionhover

Answer 1

您可以尝试使用另一个函数来反转第一个函数的效果。

onArticleHover.addEventListener("mouseout", anotherFunctionName);

另一个功能应该撤消更改。