vanilla JS悬停在div上更改背景颜色答案

【问题标题】：vanilla JS hover over div change background colorvanilla JS悬停在div上更改背景颜色
【发布时间】：2020-01-18 08:28:21
【问题描述】：

我正在构建一个类似于 Etch-a-Sketch 的交互式网格。我已经设置了网格，现在正尝试设置“悬停”效果，以便当鼠标经过网格 div 时，网格 div 会改变颜色，从而像笔一样在网格中留下（像素化的）轨迹。但我希望颜色根据单击的按钮而改变；即，当您悬停时，黑色按钮会留下黑色轨迹，彩虹会留下彩虹轨迹并重置会清除网格。

<head> 
  <title> Claudias Etch-A-Sketch</title>
  <link rel= "stylesheet"  href="style.css">

</head>
<body>
  <section class="black"> 
    <h1><center> Claudia Etch-A-Sketch!</center></h1>
  </section>

  <section>
    <div class="buttons">
      <button id="rainbow">Rainbow</button>
      <button id="black">Black</button>
      <button id="reset">Reset</button>
    </div>
  </section>
  <section>
    <div id="container"> </div>
  </section>
</body>


<script src="javascript.js"></script>

const container = document.getElementById("container");
const btnReset = document.getElementById("reset");
const btnBlack = document.getElementById("black");
const btnRainbow = document.getElementById("rainbow");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");

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

makeRows(16, 16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

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

.grid-item {
  height: 30px;
  width: 30px;
  border: 1px solid #ddd;
  text-align: center;
}  

.black {
  background-color: black;
}

h1 {
  color: white;
}

【问题讨论】：

您已经在您的 HTML 中包含了 jQuery，您是否打算使用它？ div 的背景只能使用 CSS 在悬停时改变。
它对我们来说是 JavaScript 事件 mouseover 还是上面提到的 cmets？
我不打算使用 jQuery，当我决定时忘记在 HTML 中删除它。现已删除。
已删除 jquery 标签

标签： javascript html css hover

【解决方案1】：

因为你想要一个轨迹，你需要永久改变颜色，而不仅仅是在悬停时，所以你需要使用 javascript。

在创建网格时为每个网格项添加事件监听器：

cell.addEventListener('mouseover', 
  e => e.target.classList.add('my-colour-class')
)

然后确保您的 my-colour-class 具有适当的样式

.my-color-class {
  background-colour: blue;
}

注意，要更改应用的类（根据选择的笔更改轨迹颜色）将当前颜色存储在状态变量中并具有例如地图

let currentColor = 'black'

const colors = { black: 'black' }

e => e.target.classList.add(colors[currentColor])

【讨论】：

很好，但是您可以使用事件委托并将其添加到网格本身，而不是为每个网格项添加事件侦听器。 developer.mozilla.org/en-US/docs/Learn/JavaScript/…
是的，这是管理监听器清理、避免内存泄漏、简单性和性能（如果它变得那么复杂的话）的更好架构。 davidwalsh.name/event-delegate 是您链接中更简洁的链接 - 谢谢！
这是我现在所拥有的，我一定错过了一些东西，因为它不起作用并且它放在我的 make 行 (16,16) 下；来自上面发布的代码function blackbutt (e) {document.getElementsByClassName('black').addEventListener('click', function (e){ cell.addEventListener('mouseover', e => e.target.classlist.add('black')); }) };
难以阅读，但 getElementsByClassName 返回一个 NodeList - 所以你不能直接在上面调用 addEventListener - 你需要先把它变成一个数组并循环它。

【解决方案2】：

.grid-item {
    height: 30px;
    width: 30px;
    border: 1px solid #ddd;
    text-align: center;
    transition: ease 3s all;
}

.grid-item:hover {
    background-color: blue;
    transition: ease 0.1s all;
}

我们可以添加 :hover anivation with css trick

【讨论】：

这没有回答问题，因为鼠标不再悬停后悬停效果就不会持续。