JS实现悬停不同容器元素联动修改另一容器内容

• 重复绑定事件：在mouseenter回调内反复给右侧容器绑定事件监听器，触发次数越多累积的监听器越多，直接导致逻辑混乱、触发时机不符合预期
• 重置时机错误：将右侧内容重置逻辑绑定在单个左侧菜单项的mouseleave事件上，鼠标一离开单个左侧项就触发重置，没有覆盖鼠标移动到右侧容器的场景
• 布局存在断层：原有CSS里左右容器高度不一致，鼠标从左栏移到右栏时容易经过无元素的空白区域，意外触发离开事件
• 缺失全局状态判断：没有统一标记当前激活的菜单项，也没有以整个下拉容器为范围判断鼠标是否离开，零散绑定的事件无法协同工作

放弃零散绑定单个元素事件的思路，统一以整个下拉容器为范围做事件监听，用配置映射表管理菜单项和右侧内容的对应关系，仅当鼠标完全离开整个下拉区域时才重置内容。

修复后完整代码 #

JavaScript #

// DOM选择器
const menuItems = document.querySelectorAll(".drop-1h-list li");
const drop2HCaptionText = document.querySelector(".drop-2h-captiontext");
const hireDropdown = document.querySelector("#hire-dropdown");

// 菜单项与右侧展示内容的映射表，新增分类直接在此扩展即可
const contentMap = {
  breakingline: "Camon C2000 Rotavator",
  compactionline: "Compaction category featured product",
};
const defaultContent = "Boss Ladderspan 3T Scaffold Tower (Single Width)";

// 左侧菜单项悬停时同步更新右侧内容
menuItems.forEach(item => {
  item.addEventListener("mouseenter", () => {
    const itemKey = item.classList[0];
    drop2HCaptionText.textContent = contentMap[itemKey] || defaultContent;
  });
});

// 仅当鼠标完全离开整个下拉菜单区域时，才重置为默认内容
hireDropdown.addEventListener("mouseleave", () => {
  drop2HCaptionText.textContent = defaultContent;
});

CSS #

.nav-list {
  list-style: none;
  border: 1px solid blue;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  color: white;
  background-color: #429CD9;
  margin: 0;
  padding: 0;
}

#hire-dropdown {
  position: absolute;
  cursor: pointer;
  padding: 0 3em;
}

.hdrop,
.block-1h,
.block-2h {
  display: none;
}

/* 修复原有通配选择器导致的布局异常，精确控制下拉元素显示 */
#hire-dropdown:hover .hdrop,
#hire-dropdown:hover .block-1h,
#hire-dropdown:hover .block-2h {
  display: grid;
}

#hire-dropdown .hdrop {
  grid-template-areas: "block-1h block-2h";
  grid-template-columns: 1fr 1fr;
}

.block-1h {
  grid-area: block-1h;
  height: 40em; /* 与右侧栏高度统一，消除鼠标移动断层 */
}

.block-2h {
  grid-area: block-2h;
  background-color: white;
  border: 1px solid black;
  height: 40em;
  padding: 1em;
}

.drop-1h-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
  background-color: white;
  height: 100%;
}

.drop-1h-list li {
  padding: 0.8em 1.2em;
}

.drop-1h-list li a {
  color: #3D3F41;
  text-decoration: none;
}

.drop-most-popular-hire,
.drop-2h-captiontext {
  color: #3D3F41;
  margin: 0;
}

.drop-most-popular-hire {
  padding-left: 2em;
  margin-bottom: 1em;
}

HTML #

原有HTML结构无需修改，可直接复用。

• 鼠标悬停左侧任意菜单项，右侧内容实时同步更新
• 鼠标从左侧菜单项移动到右侧内容区时，当前展示的内容不会重置，可正常交互
• 鼠标在左侧不同菜单项之间切换时，右侧内容实时跟随切换
• 鼠标完全离开整个下拉菜单区域后，内容自动重置为默认状态
• 左右栏高度对齐，不会出现鼠标移动时意外触发关闭/重置的问题

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