如何实现父元素hover时子单元格高亮？Connect4游戏开发问题

我正在开发一款Connect4游戏，期望实现以下功能：当用户将鼠标悬停在某一列的任意区域时，该列内所有空单元格均高亮显示。目前悬停列时，仅列背景变为红色，我需要改为仅单元格背景高亮，列背景保持不变。

解决方案 #

核心是通过CSS后代选择器，仅在列被悬停时修改空单元格的背景色，不改动列本身的背景样式。

1. 移除原有列悬停规则
   删除当前代码中改变列背景的规则：

   .column:hover {
     background: red
   }
   

2. 添加空单元格高亮规则
   替换为以下规则，精准针对列内未填充的单元格应用高亮：

   .column:hover .cell:not(.filled) {
     background-color: red; /* 可替换为你需要的高亮颜色 */
   }
   

   • :not(.filled)伪类用于排除已放置棋子的单元格（后续给有棋子的单元格添加.filled类即可）。如果暂时不需要区分填充状态，直接用.column:hover .cell即可。

完整代码示例 #

CSS

.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:not(.filled) {
  background-color: red;
}

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

/* 可选：已填充单元格样式示例 */
.cell.filled {
  background-color: yellow; /* 比如代表玩家棋子的颜色 */
}

HTML

<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 filled" data-cell></div> <!-- 已填充的单元格示例 -->
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
  </div>
  <!-- 可添加更多列 -->
</div>

说明 #

• 列的背景会保持原有的蓝色，只有空单元格在列被悬停时会高亮。
• 后续实现落子逻辑时，只需给放置棋子的单元格添加.filled类，就能自动排除高亮。

内容的提问来源于stack exchange，提问作者Alex