Javascript：当鼠标移过它们时突出显示所有段落，然后在鼠标经过后恢复答案

【问题标题】：Javascript: Highlight all paragraphs when the mouse moves over them and then revert back once the mouse has passedJavascript：当鼠标移过它们时突出显示所有段落，然后在鼠标经过后恢复
【发布时间】：2021-03-08 01:50:53
【问题描述】：

我对 Javascript 完全陌生；请有人以我能理解的最简单的方式帮助我解决我的问题。

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。 Do some research，搜索SO相关话题；如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
可能不需要 JavaScript。查找 CSS 悬停段落
这能回答你的问题吗？ Change color by mouse over

标签： javascript highlight mouseover

【解决方案1】：

您可以使用 CSS 或 Javascript 来做到这一点。不管怎样，结果都是一样的。

CSS

您可以通过将段落包装在 <div> 中，然后创建 CSS :hover 选择器来做到这一点。

.paragraphs:hover {
  color: lightgreen;
}

<div class="paragraphs">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>

JS

将所有段落包装在<div> 中，然后添加mouseenter 和mouseleave 事件监听器。

var paragraphs = document.querySelector('.paragraphs');

paragraphs.addEventListener('mouseenter', e => {
  paragraphs.style.color = 'lightgreen';
});

paragraphs.addEventListener('mouseleave', e => {
  paragraphs.style.color = 'black';
});

<div class="paragraphs">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>

【讨论】：

乐于助人。如果这解决了您的问题，请点击上面的复选标记将问题标记为已解决。

【解决方案2】：

您可以使用 addEventListner 并监听滚动。在回调中你可以切换类。

【讨论】：

如果你能提供示例代码那就更容易理解了。

【解决方案3】：

我想你不需要 JS。您可以简单地使用像 hover 这样的 CSS 选择器在悬停 HTML 元素时为其添加一些效果。

a:hover {
  background-color: yellow;
}

【讨论】：

谢谢，但是我正在做一个在线训练营，我必须使用 javascript，但我会记住这一点，以便将来编码