Question

我正在尝试在从querySelectorAll获取的列表中的每个li上使用addEventListener，在将鼠标悬停在其上方时更改每个项目的颜色。但是，我不能通过使用列表中项目的索引来更改颜色，而必须使用它。我想知道为什么索引在这里不起作用

var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++) {
   lis[i].addEventListener("mouseover", function() {
       this.style.color = "green";
    }); 
}

Answer 1

您还需要使用mouseout事件。您还可以使用classList.add在mouseover上添加一个类，并在mouseout上使用classList.remove来删除该类

var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("mouseover", function() {
    this.classList.add("green");
  });

  lis[i].addEventListener("mouseout", function() {
    this.classList.remove("green");
  });
}

.green {
  color: green;
}

<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>



</ul>

通过querySelectorAll访问for循环中的项目

1 个答案: