本文介绍了如何使弹出窗口溢出：在溢出内可见：自动上下文的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个div列表(如果超出父框，则应滚动overflow-x)，并且在悬停时，我希望看到弹出窗口。
我的问题是，如果我悬停任何子div，溢出计算都会考虑弹出窗口，但我只想让它在所有内容的顶部可见，而不是使它扩展滚动区域，也不希望它隐藏在父div的右边界上。我可以以某种方式将其从父/子上下文中分离吗？
.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>推荐答案
IMHO只要弹出窗口位于带有"；overflow：auto"；、"；overflow：scroll"；或"；overflow：idden"；的div中，您就无法避免使用纯HTMLcss/css试图避免的行为。不过，请找个人帮我纠正一下。
我建议按照我的示例使用最小的JS(JQuery)。这也可以用香草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>这篇关于如何使弹出窗口溢出：在溢出内可见：自动上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！