如何实现子列表在父元素mouseout后保持显示，仅自身mouseout后隐藏？

问题分析 #

你需要实现的逻辑是：鼠标悬停目标元素（iitem1）时显示关联的隐藏行（rrow1），鼠标离开目标元素后，隐藏行仍保持显示，直到鼠标离开隐藏行本身；同时如果鼠标离开目标元素后未移至隐藏行，隐藏行需自动隐藏。

修正后的代码方案 #

方案1：无需修改HTML结构（适配现有DOM）

const el = document.getElementById('iitem1');
const hiddenDiv = document.getElementById('rrow1');

// 统一显示隐藏元素的函数
function showHiddenDiv() {
  hiddenDiv.style.visibility = 'visible';
}

// 统一隐藏元素的函数
function hideHiddenDiv() {
  hiddenDiv.style.visibility = 'hidden';
}

// 鼠标进入目标元素时显示隐藏行
el.addEventListener('mouseenter', showHiddenDiv);

// 鼠标进入隐藏行时保持显示（避免过渡过程中误隐藏）
hiddenDiv.addEventListener('mouseenter', showHiddenDiv);

// 鼠标离开目标元素时，判断是否移至隐藏行，否则隐藏
el.addEventListener('mouseleave', function(e) {
  if (!hiddenDiv.contains(e.relatedTarget)) {
    hideHiddenDiv();
  }
});

// 鼠标离开隐藏行时，最终隐藏元素
hiddenDiv.addEventListener('mouseleave', hideHiddenDiv);

方案2：修改HTML结构（更简洁的实现）

如果可以调整HTML，将目标元素和隐藏行放在同一个父容器中，只需监听容器的进入/离开事件即可：

<div class="hover-container">
  <div id="iitem1">你的目标元素</div>
  <div id="rrow1" style="visibility: hidden;">需要显示的隐藏行</div>
</div>

对应的JavaScript：

const container = document.querySelector('.hover-container');
const hiddenDiv = document.getElementById('rrow1');

container.addEventListener('mouseenter', () => {
  hiddenDiv.style.visibility = 'visible';
});

container.addEventListener('mouseleave', () => {
  hiddenDiv.style.visibility = 'hidden';
});

关键改进点 #

• 用mouseenter/mouseleave替代mouseover/mouseout，避免事件冒泡导致的重复触发问题
• 方案1中通过e.relatedTarget判断鼠标移动目标，确保从目标元素移至隐藏行时不触发隐藏
• 方案2利用父容器的事件监听，简化逻辑，更易维护

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