javascript - 针对 :hover DOM with querySelectorAll 的问题

Question

当鼠标悬停在 li 标签上时，我无法将其背景颜色更改为红色。

摘自 javascript.info

Can use pseudo-classes as well: Pseudo-classes in the CSS selector like :hover and :active are also supported. For instance, document.querySelectorAll(':hover') will return the collection with elements that the pointer is over now (in nesting order: from the outermost to the most nested one).

let hover = document.querySelectorAll('li:hover');

for (let elem of hover) {
  elem.style.background = 'red';
};

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>

Answer 1

您最好将 mouseenter 和 mouseleave 事件监听器添加到 li 标记本身，而不是尝试根据:hover 选择器。当文档加载时，没有一个被悬停，所以集合是空的。

let hover = document.querySelectorAll('li');

for (let elem of hover) {
  elem.addEventListener('mouseenter', () => {
    elem.style.backgroundColor = 'red'
  })
  elem.addEventListener('mouseleave', () => {
    elem.style.backgroundColor = ''
  })
};

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>