How get get child elements to react to hovering on the parent element?

Question

I'm trying to make a connect 4 game. The functionality I'm trying to achieve is that a whole column of empty cells should be highlighted when the user hovers their mouse over any part of column that those cells belong to.

Currently, when I hover over the column, the background of the column is highlighted, but I want the background of all the cells in the column to be highlighted instead, and the column background not change.

How would I go about this? Thanks!

.board {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: center;
  background-color: blue;
  border-radius: 3%;
  margin: 0 auto;
  justify-content: center;
}

.column:hover {
  background: red
}

.cell {
  border: 1px solid grey;
  background-color: black;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  outline: 2px solid black;
  margin: 10px;
}

<div class="board" id="board">
  <div class="column" data-column>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
  </div>
</div>

Answer 1

Change the .column:hover rule so it selects the divs with the class .cell as follows:

.board {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: center;
  background-color: blue;
  border-radius: 3%;
  margin: 0 auto;
  justify-content: center;
}

.column:hover .cell {
  background-color: red;
}

.cell {
  border: 1px solid grey;
  background-color: black;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  outline: 2px solid black;
  margin: 10px;
}

<div class="board" id="board">
  <div class="column" data-column>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
  </div>
</div>