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

编程问答 2022-04-23

问题描述

这是我的 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());

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

非常感谢

解决方法

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

onArticleHover.addEventListener("mouseout",anotherFunctionName);

另一个函数应该撤销更改。

,

关闭 div 和 main。您可以在 html 标签中使用 onmouseover="a()" onmouseout="b()"。函数 a 可以改变文本，函数 b 可以把它改回原来的状态。

onmouseover event - w3schools

functionfunctionhoverhtmljavascript