鼠标悬停操作DOM元素类及红蓝表格单元格联动显示技术问题

没问题，这两个需求我帮你拆解清楚，直接上可运行的代码和关键解释，你照着改就行～

1. 鼠标悬停时移除另一DOM对象中第n个元素的类 #

核心思路 #

先监听触发悬停的元素，在鼠标滑上去的时候，定位到目标DOM容器里的第n个元素，然后用classList.remove()把指定类删掉就行。注意CSS的:nth-child()选择器是从1开始计数的，别搞混了！

代码示例 #

HTML结构

<!-- 触发悬停的元素 -->
<div class="hover-trigger">鼠标悬停我试试</div>

<!-- 目标DOM容器 -->
<div class="target-box">
  <div class="list-item active">选项1</div>
  <div class="list-item active">选项2</div>
  <div class="list-item active">选项3</div>
</div>

JavaScript代码

// 获取触发悬停的元素
const trigger = document.querySelector('.hover-trigger');
// 这里选第2个元素，所以用:nth-child(2)
const targetItem = document.querySelector('.target-box .list-item:nth-child(2)');

// 绑定鼠标悬停事件
trigger.addEventListener('mouseover', () => {
  // 移除active类，你换成自己需要移除的类名就行
  targetItem.classList.remove('active');
});

2. 蓝色表格悬停显示对应红色表格单元格 #

核心思路 #

你已经加了onmouseover="showDellCell()"，那只要在这个函数里通过event.target拿到当前悬停的蓝色单元格，然后获取它的行、列索引，再找到红色表格里对应位置的单元格，移除隐藏样式就搞定了。

代码示例 #

HTML结构（简化版，你可以套进自己的结构里）

<!-- 顶部红色表格 -->
<table class="red-table top-table">
  <tr>
    <td class="hidden">顶部对应列1</td>
    <td class="hidden">顶部对应列2</td>
    <td class="hidden">顶部对应列3</td>
  </tr>
</table>

<div class="table-group">
  <!-- 左侧红色表格 -->
  <table class="red-table left-table">
    <tr><td class="hidden">左侧对应行1</td></tr>
    <tr><td class="hidden">左侧对应行2</td></tr>
    <tr><td class="hidden">左侧对应行3</td></tr>
  </table>

  <!-- 蓝色表格，注意要把event传进函数里 -->
  <table class="blue-table">
    <tr>
      <td onmouseover="showDellCell(event)">蓝格1-1</td>
      <td onmouseover="showDellCell(event)">蓝格1-2</td>
      <td onmouseover="showDellCell(event)">蓝格1-3</td>
    </tr>
    <tr>
      <td onmouseover="showDellCell(event)">蓝格2-1</td>
      <td onmouseover="showDellCell(event)">蓝格2-2</td>
      <td onmouseover="showDellCell(event)">蓝格2-3</td>
    </tr>
  </table>
</div>

<!-- 基础样式 -->
<style>
.hidden { display: none; }
.red-table { border: 1px solid #ff4444; margin-bottom: 10px; }
.blue-table { border: 1px solid #4488ff; }
td { padding: 8px; }
.table-group { display: flex; }
</style>

JavaScript函数

function showDellCell(event) {
  // 1. 拿到当前悬停的蓝色单元格
  const currentBlueCell = event.target;
  
  // 2. 获取行、列索引（注意：rowIndex是父元素<tr>的索引，从0开始）
  const rowIndex = currentBlueCell.parentElement.rowIndex;
  const colIndex = currentBlueCell.cellIndex;

  // 3. 找到顶部红色表格的对应列单元格（CSS选择器从1开始，所以要+1）
  const topRedCell = document.querySelector(`.top-table tr td:nth-child(${colIndex + 1})`);
  // 4. 找到左侧红色表格的对应行单元格
  const leftRedCell = document.querySelector(`.left-table tr:nth-child(${rowIndex + 1}) td`);

  // 5. 移除隐藏类，显示单元格
  topRedCell.classList.remove('hidden');
  leftRedCell.classList.remove('hidden');

  // 可选：鼠标离开时重新隐藏单元格，避免一直显示
  currentBlueCell.addEventListener('mouseout', () => {
    topRedCell.classList.add('hidden');
    leftRedCell.classList.add('hidden');
  }, { once: true }); // 用once: true防止重复绑定事件
}

划重点：一定要在onmouseover里把event传进函数，不然拿不到当前悬停的单元格哦！

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