如何使用JavaScript实现鼠标悬停网格单元格时添加样式类并在移出悬停后保留该类？

Hey there! No worries at all—your question is totally clear, and it’s awesome you’re diving into JavaScript for the first time. Let’s get that grid working exactly how you want it.

The main thing missing right now is event listeners to handle when the mouse interacts with a cell. Since you want the black fill to stay even after the mouse moves away, we don’t need to track mouseleave—instead, we just need to add a permanent styling class to the cell as soon as the mouse enters it.

First, let’s fix a small bug in your createColumn function (it was appending columns to the wrong rows), then we’ll add the hover logic.

Modified JavaScript Code #

const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();

function defaultGrid() {
  createRow(18);
  createColumn(18);
}

function createRow(rowNum) {
  for (let i = 0; i < rowNum; i++) {
    let row = document.createElement('div');
    container.appendChild(row).className = 'grid-row';
  }
}

function createColumn(cellNum) {
  for (let i = 0; i < rows.length; i++) {
    for (let j = 0; j < cellNum; j++) {
      let newCell = document.createElement('div');
      // Fix: Append cells to the current row (rows[i]) instead of rows[j]
      rows[i].appendChild(newCell).className = 'grid-column';
      // Add mouseenter event to each cell to apply permanent fill
      newCell.addEventListener('mouseenter', function() {
        this.classList.add('fill');
      });
    }
  }
}

Key Changes Explained #

1. Fixed the row index bug: Swapped rows[j] to rows[i] in createColumn so columns are added to the correct rows (no more misaligned cells!).
2. Added mouseenter event listeners: Every cell gets a listener that triggers when the mouse moves over it. The listener adds your pre-defined fill class to the cell, which stays applied permanently (so the black background never disappears).

Tweaked CSS for Better Grid Layout #

Your CSS was almost perfect—we just added a line to make rows stack properly:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid-row {
  /* Make rows stack vertically instead of overlapping */
  display: block;
  margin-bottom: 2px;
}

.grid-column {
  display: inline-block;
  border: 1px solid black;
  min-height: 20px;
  min-width: 20px;
  margin-left: 2px;
}

#container {
  border: 5px solid chartreuse;
  padding: 10px;
}

.fill {
  background: black;
}

Your HTML Remains Unchanged #

<h2>test</h2>
<div id="container">
</div>

How It Works #

Now, every time you hover over a cell, the mouseenter event fires and adds the fill class. Since we never remove this class, the cell stays black even after you move the mouse away—perfect for drawing on your grid!

内容的提问来源于stack exchange，提问作者Chris-SL