Question

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

updateSQL

<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);

Answer 1

由于需要跟踪，因此需要永久更改颜色，而不仅仅是在悬停时更改颜色，因此需要使用javascript。

使用以下方法创建网格时，将事件侦听器添加到每个网格项：

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

然后只需确保您的my-colour类具有适当的样式

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

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

let currentColor = 'black'

const colors = { black: 'black' }

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

Answer 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;
}

我们可以使用CSS技巧添加：hover激动

香草JS悬停在div上更改背景颜色

2 个答案: