当我的鼠标悬停在每个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>您可能最好将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>问题是您没有实时计算该悬停事件。我的意思是，这样您就可以订阅任何事件。为此，您可以尝试例如事件“ 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>