如何实现父元素未hover时子元素hover状态不消失并支持点击？

当鼠标悬停在第2、3、4个.item元素上时，左侧会显示隐藏的.hide文本；但把光标移到.hide文本上时，该文本会再次隐藏。我需要实现：悬停.item元素后，将光标移至.hide文本上时，.hide保持显示状态，方便点击操作。请问能否通过CSS或JS实现该需求？

我的HTML代码 #

<div class="container">
    <div class="item">item
       <div class="hide">hide</div>
    </div>
   <div class="item">item <div class="hide">hide</div></div>
   <div class="item">item <div class="hide">hide</div></div>
   <div class="item">item <div class="hide">hide</div></div>
</div>

我的CSS代码 #

.container {
  display: flex;
  position: relative;
}

.item {
  padding: 1px;
  cursor: pointer;
}

.hide {
    opacity: 0;
    position: absolute;
    left: 0;
}

.item:hover .hide {
  display: block;
  opacity: 1;
}

我尝试过的方法 #

我尝试扩展.hide元素的宽度，但没有效果：

.hide {
    width: 100vw;
}

有没有办法扩展.hide元素宽度或通过其他方式，实现父元素未hover时.hide元素不消失？

方案一：纯CSS实现（推荐） #

问题根源是.hide用了绝对定位，脱离了.item的文档流，导致鼠标移到.hide上时，.item的hover状态直接失效。可以通过两种方式修复：

方式1：用伪元素扩展hover区域 #

给.item添加一个伪元素，覆盖.item和.hide的范围，这样鼠标移到.hide上时，伪元素仍处于.item的hover范围内：

.container {
  display: flex;
  position: relative;
}

.item {
  padding: 1px;
  cursor: pointer;
  position: relative; /* 让伪元素基于.item定位 */
}

.hide {
  opacity: 0;
  position: absolute;
  left: 0;
  pointer-events: auto; /* 确保可以点击 */
}

/* 新增伪元素，覆盖.item和.hide的区域 */
.item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* 不干扰元素点击 */
}

.item:hover .hide {
  opacity: 1;
}

方式2：调整布局，让.hide属于.item的hover范围 #

给.item左侧留出.hide的位置，让.hide的区域包含在.item的padding内，这样鼠标移到.hide上时，仍处于.item的hover状态：

.container {
  display: flex;
  position: relative;
}

.item {
  padding: 1px 1px 1px 40px; /* 左侧留出40px给.hide */
  cursor: pointer;
  position: relative;
}

.hide {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px; /* 和左侧padding对应 */
}

.item:hover .hide {
  opacity: 1;
}

方案二：JavaScript实现 #

如果CSS布局受限，可以用JS监听鼠标事件精确控制显示状态：

const items = document.querySelectorAll('.item');

items.forEach(item => {
  const hideEl = item.querySelector('.hide');
  
  // 鼠标进入item时显示hide
  item.addEventListener('mouseenter', () => {
    hideEl.style.opacity = '1';
  });
  
  // 鼠标离开item时，检查是否进入hide
  item.addEventListener('mouseleave', (e) => {
    if (!hideEl.contains(e.relatedTarget)) {
      hideEl.style.opacity = '0';
    }
  });
  
  // 鼠标离开hide时，检查是否回到item
  hideEl.addEventListener('mouseleave', (e) => {
    if (!item.contains(e.relatedTarget)) {
      hideEl.style.opacity = '0';
    }
  });
});

这段代码会在鼠标完全离开.item和.hide区域时，才隐藏.hide元素。

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