Solution 1 :

Since you want a trail, you need to change the colour permanently, not just on hover, so you need to use javascript.

Add an event listener to each grid item when you’re creating your grid with:

  e =>'my-colour-class')

Then just make sure your my-colour-class has the appropriate styles

.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 e.g.

let currentColor = 'black'

const colors = { black: 'black' }

e =>[currentColor])

Solution 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

Problem :

I’m working on building an interactive grid that is similar to an 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. 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.

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

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

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

<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) {'--grid-rows', rows);'--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;


Comment posted by Akxe

You have already included jQuery in your HTML, do you plan to use it or not? Background of div can change on hover using CSS only.

Comment posted by Alan M

It has to us JavaScript event mouseover or as mentioned by the comments above?

Comment posted by Elliott1197

I dont plan to use jQuery, forgot to delete it in HTML when I decided. its deleted now.

Comment posted by Huangism

jquery tag removed

Comment posted by…

Great, but instead of adding an event listener to each grid item, you can use event delegation and add it to the grid itself.

Comment posted by

Yes, that is better architecture for managing listener cleanup, avoiding memory leaks, simplicity, and performance (if it got that complex).

Comment posted by Elliott1197

this what i have now and I must be missing something because its not working and its placed under my make rows (16,16); from code posted above

Comment posted by Dan

hard to read but getElementsByClassName returns a NodeList – so you can’t call addEventListener directly on that – you’d need to turn it into an array first and loop over it.

Comment posted by Dan

This doesn’t answer the question because the hover effect is not sustained after the mouse is no longer hovering.


Leave a Reply

Your email address will not be published. Required fields are marked *