如何使弹出窗口溢出：溢出内部可见：自动上下文

Question

我有一个 div 的列表（如果超出父框，overflow-x 应该滚动），悬停时，我想看到一个弹出窗口。

我的问题是，如果我将鼠标悬停在任何子项 div 上，弹出窗口会被考虑用于溢出计算，但我只想让它在所有内容之上可见，而不是让它扩展滚动区域它也没有隐藏在父级的右边框上。我能以某种方式将它从 parent/child 上下文中分离出来吗？

.parent {overflow-x: visible} 不是一个选项，因为我想保持父级大小并让子级可滚动。

div {
  border-style: solid;
  margin: 10px;
}

.parent {
  overflow-x: auto;
  
  white-space : nowrap;
  width: 200px;
  height: 150px;
  background-color: grey;
}

.child {
  position: relative;
  
  display: inline-block;
  width: 70px;
  height: 100px;
  background-color: lightblue;
}

.popover {
  display: none;
  position: absolute;
  left: 30px;
  
  z-index:9999;
  width: 80px;
  height: 50px;
  background-color: lightgreen;
}

.child:hover .popover {
  display: block;
}

<div class="parent">
  <div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div>
</div>

Answer 1

恕我直言，只要您的弹出窗口位于 div 中且带有“溢出：自动”、“溢出：滚动”或“溢出：隐藏”。但是请有人纠正我。

根据我的示例，我建议为此使用最少的 JS (jQuery)。它也可以使用 vanilla JS 来完成，但恕我直言，这不值得付出努力。基本上 JS 做了三件事，(1) 附加到 mouseenter 和 mouseleave 事件，(2) 在捕获和冒泡阶段停止事件的进一步传播，以及 (3) 设置弹出窗口的位置。

这还有一个额外的好处，就是能够控制弹出窗口的其他各个方面。

为了完整起见，我也创建了一个普通的 JS 版本，尽管我不会那样做。

https://jsfiddle.net/rq1xc548/

$(".child").on( {
    mouseenter: function(event) {
        event.stopPropagation();
        let position = $(this).offset();
        $(this).find(".popover").css("top", position.top);
        $(this).find(".popover").css("left", position.left-10);
        $(this).find(".popover").css("display", "block");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".popover").css("display", "none");
    }
});

div {
  border-style: solid;
  margin: 10px;
}

.parent {
  overflow-x: auto;
  
  white-space : nowrap;
  width: 200px;
  height: 150px;
  background-color: grey;
}

.child {
  position: relative;
  
  display: inline-block;
  width: 70px;
  height: 100px;
  background-color: lightblue;
}

.popover {
  display: none;
  position: fixed;
  
  z-index:9999;
  width: 80px;
  height: 50px;
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div>
</div>

如何使弹出窗口溢出：溢出内部可见：自动上下文

how to make a popover overflow: visible inside overflow: auto context

html

css

position

overflow