使用鼠標懸停事件更改 JavaScript 中元素的顏色

Question

我試圖在鼠標經過時更改元素<div class="box"></div>的顏色，但我的代碼必須存在某種錯誤，我找不到問題：

 let html = ""; for(i = 0; i < 256; ++i){ html += `<div class="box"></div>` } document.querySelector(".grid").innerHTML += html; /*CHANGE COLOR WHEN MOUSE GO OVER*/ let newColor = document.querySelector(".box") newColor.addEventListener("mouseover", changeColor) function changeColor(){ document.querySelector(".box").style.color = "green" }

 <div class="grid"></div>

Answer 1

將您的 javascript 更改為：

let newColor = document.querySelectorAll(".box");
          for (const color of newColor) {
            color.addEventListener("mouseover", () => {
              color.style.backgroundColor = "green";
            });
          }

編輯（解釋）

querySelect只會 select 第一個元素（第一個“.box”）。

將其更改為querySelectAll ，您將所有這些都定位在一個數組中，例如 object。 然后使用 for 循環將addEventListener附加到每個元素。