Javascript: 当鼠标移到所有段落上时突出显示所有段落，然后在鼠标经过时恢复原状

Question

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

Answer 1

我想你不需要 JS。您可以简单地使用 CSS 选择器，例如 hover，在悬停 HTML 元素时添加一些效果。

a:hover {
  background-color: yellow;
}

Answer 2

您可以使用 addEventListner 并监听滚动。在回调中，您可以切换 class.

Answer 3

您可以使用 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 and 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>

Javascript: 当鼠标移到所有段落上时突出显示所有段落，然后在鼠标经过时恢复原状

Javascript: Highlight all paragraphs when the mouse moves over them and then revert back once the mouse has passed

javascript

highlight

mouseover

CSS

JS