如何交换<div>使用“鼠标悬停”事件的元素？</div><div id="text_translate"><pre> let wrapperSt = document.querySelector(".wrapper"); for(i=0; i<100; i++){ let divGroup = document.createElement('div'); wrapperSt.append(divGroup); divGroup.className= 'pixel'; divGroup.textContent= ''; }</pre><p> 我使用循环创建了名为“pixel”的 div 元素，因为我需要数百个元素。 （<em>我会将它们用作可以改变颜色的小盒子</em>）</p><p> 但是，我希望这些框（“<em>像素</em>”div）变成棕色并维持（ <em>style.backgroundColor ="brown";</em> ）</p><p> 因此，我创建了另一个 div 来替换之前的 div（“ <em>pixel</em> ”）。</p><pre> let selectPx = document.getElementsByClassName("pixel"); selectPx.addEventListener("mouseover", function(){ let pxChange = createElement("div"); //This is where i got stuck! })</pre><p> 我无法完成我的代码，我发现它有点复杂，即使它可能非常简单。</p><p> 任何建议或信息都会非常有帮助。 谢谢你。</p></div>

Question

let wrapperSt = document.querySelector(".wrapper");

for(i=0; i<100; i++){
let divGroup = document.createElement('div');
wrapperSt.append(divGroup);
divGroup.className= 'pixel';
divGroup.textContent= '';
}

我使用循环创建了名为“pixel”的 div 元素，因为我需要数百个元素。 （我会将它们用作可以改变颜色的小盒子）

但是，我希望这些框（“像素”div）变成棕色并维持（ style.backgroundColor ="brown"; ）

因此，我创建了另一个 div 来替换之前的 div（“ pixel ”）。

let selectPx = document.getElementsByClassName("pixel");

selectPx.addEventListener("mouseover", function(){

let pxChange = createElement("div");
//This is where i got stuck!

})

我无法完成我的代码，我发现它有点复杂，即使它可能非常简单。

任何建议或信息都会非常有帮助。 谢谢你。

Answer 1

不确定您到底想做什么...我认为您正在尝试更改鼠标悬停的div的颜色？ 如果是这样，您的代码有几个问题。 您无需将事件侦听器添加到div列表中，而是需要将其单独添加到每个列表中。 此外，您应该只需要更改每个元素的背景颜色，而不是每次都创建一个新元素。

let selectPx = document.querySelectorAll(".pixel");

selectPx.forEach(pixel => {
  pixel.addEventListener("mouseover", () => {
    pixel.style.backgroundColor = "brown";
  });
});

Answer 2

我不确定为什么你必须在第一个里面创建一个新的 div。 在您的代码中，当您触发鼠标悬停事件时，您可以获得鼠标下方的 div 并将样式应用于它：

let selectPx = document.getElementsByClassName("pixel");

selectPx.addEventListener("mouseover", function(evt){

    let divUnderMouse = evt.target;
    divUnderMouse.style.backgroundColor ="brown";

})

我没试过，但应该可以