我有一个 div 列表（如果超过父框，overflow-x 应该滚动），并且在悬停时，我想看到一个弹出窗口。
我的问题是，如果我将鼠标悬停在任何子 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>
恕我直言，只要您的弹出窗口位于带有“overflow：auto”、“overflow：scroll”或“overflow：hidden”的div内，就无法使用纯HTML / CSS来避免您试图避免的行为。但请有人纠正我。
按照我的示例，我建议使用最少的 JS (jQuery)。也可以使用普通 JS 来完成，但恕我直言，这不值得付出努力。
JS 基本上做了三件事，(1) 附加到 mouseenter 和 mouseleave 事件，(2) 在捕获和冒泡阶段停止事件的进一步传播，以及 (3) 设置弹出窗口的位置。
这还有一个额外的好处，那就是能够控制弹出窗口的各个其他方面。
为了完整起见，我还创建了一个普通的 JS 版本，尽管我不会那样做。
https://jsfiddle.net/rq1xc548/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
