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

Question

I'm working on building an interactive grid that is similar to an Etch-a-Sketch.我正在构建一个类似于 Etch-a-Sketch 的交互式网格。 I have my grid set up and am now trying to set up a “hover” effect so that the grid divs change color when your mouse passes over them, leaving a (pixelated) trail through your grid as a pen would.我已经设置好我的网格，现在我正在尝试设置一个“悬停”效果，这样当你的鼠标经过网格 div 时它们会改变颜色，在你的网格中留下一条（像素化的）轨迹，就像笔一样。 But I want the color to change based on the button clicked;但我希望颜色根据点击的按钮而改变； ie black button leaves a black trail when you hover and rainbow leaves a rainbow trail and reset clears the grid.即当您悬停时黑色按钮会留下黑色痕迹，而彩虹会留下彩虹痕迹并重置清除网格。

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

Answer 1

Since you want a trail, you need to change the colour permanently, not just on hover, so you need to use javascript.由于您想要一条轨迹，您需要永久更改颜色，而不仅仅是悬停，因此您需要使用 javascript。

Add an event listener to each grid item when you're creating your grid with:使用以下方法创建网格时，为每个网格项添加一个事件侦听器：

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

Then just make sure your my-colour-class has the appropriate styles然后确保您的 my-colour-class 具有适当的样式

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

Note, to change the class applied (changing the trail colour depending on what pen has been selected) store the current colour in a state variable and have a map eg请注意，要更改应用的类（根据选择的笔更改轨迹颜色），请将当前颜色存储在状态变量中并具有地图，例如

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

We can add :hover anivation with css trick我们可以使用 css 技巧添加 :hover anivation

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-01-17 19:21:06

解决方案2
0 2020-01-18 00:28:21

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-01-17 19:21:06

解决方案2 0 2020-01-18 00:28:21

解决方案1
0 已采纳 2020-01-17 19:21:06

解决方案2
0 2020-01-18 00:28:21