鼠标悬停事件在javascript中不起作用答案

【问题标题】：Mouse over event not working in javascript鼠标悬停事件在javascript中不起作用
【发布时间】：2020-10-21 19:31:02
【问题描述】：

基本上我在做 odin 项目 Etch-a-Sketch 项目。他们希望我制作一个 16x16 的网格，并在您将鼠标悬停在它上面时将其更改为随机颜色。我们必须在 JS 中为网格制作 div。我已经制作好了它们并布置了网格（不包括 CSS，因为它无关紧要）。我不能让它改变颜色！

希望这没问题，这是我在这里的第一篇文章！

// Declaring important variables//

const container = document.getElementById('container');

//16x16 square grid divs//

function makeRows(rows, cols) {

  container.style.setProperty('--grid-rows', rows);

  container.style.setProperty('--grid-cols', cols);

  for (i = 0; i < (rows * cols); i++) {

    let cell = document.createElement('div');

    cell.addEventListener('mouseover', function() {

      let rcolor = '#' + Math.floor(Math.random() * 16777215).toString(16);

      cell.style.backgroundColor = rcolor;

    });

    container.appendChild(cell).className = "grid-item";

  };

};

makeRows(16, 16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
  padding: 0px;
  margin: 0px;
}

#container {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  text-align: center;
}

&lt;div id="container"&gt;&lt;/div&gt;

【问题讨论】：

您的代码运行良好......我猜这是 CSS 的问题......你没有显示
@epascarello 我更新以显示 CSS
将border: 1px solid black; 添加到单元格它会告诉你为什么它不工作
天哪，大声笑，谢谢。我感觉很笨哈哈！

标签： javascript css loops mouseevent addeventlistener

【解决方案1】：

您的积木不占用任何空间，因此没有什么可看的。

// Declaring important variables//

const container = document.getElementById('container');

//16x16 square grid divs//

function makeRows(rows, cols) {

  container.style.setProperty('--grid-rows', rows);

  container.style.setProperty('--grid-cols', cols);

  for (i = 0; i < (rows * cols); i++) {

    let cell = document.createElement('div');

    cell.addEventListener('mouseover', function() {

      let rcolor = '#' + Math.floor(Math.random() * 16777215).toString(16);

      cell.style.backgroundColor = rcolor;

    });

    container.appendChild(cell).className = "grid-item";

  };

};

makeRows(16, 16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
  padding: 0px;
  margin: 0px;
}

#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  --aspect-ratio: 1/1;
  text-align: center;
}

.grid-item::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
  }

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

在您的代码中一切正常，您只需向 #container 添加宽度和高度即可工作，并为您的容器添加边框供您查看。否则我测试了它并且它工作。

添加这个（示例）：

CSS:

#container {
    border: 1px solid black;
    height: 450px;
    width: 500px;
}

【讨论】：