定位问题：hover DOM with querySelectorAll

Question

当我的鼠标悬停在li标签上时，我无法让它们的背景颜色变为红色。

也可以使用伪类：CSS 选择器中的伪类，例如：hover 和：active 也受支持。 例如， document.querySelectorAll(':hover') 将返回包含指针现在所在元素的集合（按嵌套顺序：从最外层到最嵌套的元素）。

 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选择器对它们进行 select 。 当文档加载时，它们都没有悬停在上面，所以集合是空的。

 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>

Answer 2

问题是您没有实时计算 hover 事件。 我的意思是，这样您就不会订阅任何事件，并且 querySelectorAll 只执行一次。 为此，您可以尝试例如事件“onmousemove”，因此每次触发它都会计算您需要的内容。

这有效：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <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>
  </body>
  <script>
    window.onmousemove = () => {
      let hover = document.querySelectorAll("li:hover");
      console.log(hover);

      for (let elem of hover) {
        elem.style.background = "red";
      }
    };
  </script>
</html>

Answer 3

您可以为每个li元素使用mouseover和mouseout事件。

 document.querySelectorAll('li').forEach((v) => { v.addEventListener('mouseover', (e) => { e.target.style.background = 'red'; }); v.addEventListener('mouseout', (e) => { e.target.style.background = 'white'; }); });

 <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>

定位问题：hover DOM with querySelectorAll

问题描述

3 个解决方案

解决方案1
1 已采纳 2019-11-18 20:48:07

解决方案2
1 2019-11-18 20:50:24

解决方案3
1 2019-11-18 20:59:23

定位问题：hover DOM with querySelectorAll

问题描述

3 个解决方案

解决方案1 1 已采纳 2019-11-18 20:48:07

解决方案2 1 2019-11-18 20:50:24

解决方案3 1 2019-11-18 20:59:23

解决方案1
1 已采纳 2019-11-18 20:48:07

解决方案2
1 2019-11-18 20:50:24

解决方案3
1 2019-11-18 20:59:23