javascript - 不使用 JS 跳出隐藏溢出

Question

假设我们有以下html结构

<div class="overflow box">
  <div class="position-relative list-items">
    <div class="position-absolute show-on-hover">
  </div>
  <div class="position-relative list-items">
    <div class="position-absolute show-on-hover">
  </div>
  ...
  <div class="position-relative list-items">
    <div class="position-absolute show-on-hover">
  </div>
</div>

这个想法是主盒子（容器）必须overflow: hidden scroll在里面保存部分数量的元素，并在数量足够大时显示滚动。当hover在任何内部div时，absolute-ly 定位和显示none的元素应该出现并粘在它们各自的父级上，定位relative。

期望的结果如下所示：

然而，我们看到了这一点：

我找到了一种解决方案，即使用 javacript 计算position: relative每次悬停时父 div ( ) 的位置，从而调整悬停 divtop的left属性。

是否有任何可能的方法可以在视觉上摆脱overflow仅使用 CSS 的限制？也许是结构的一些重新排列或一些 CSS 调整。

标签： javascripthtmlcssoverflowabsolute