如果图像的父项悬停在图像上，我正在使用position: absolute和position: relative在其上显示文本。父div所在的文本和图像容器设置为overflow-x: auto，从而使其具有水平滚动条。
我希望显示的文本垂直溢出#container元素（和水平滚动条），但是这没有发生-而是在容器中出现了垂直滚动条。
我不希望容器的高度扩展到文本的高度。
我已经尝试过申请overflow-y: visible，#container但是并没有解决问题。如果我overflow-x: auto从中删除#container可解决此问题，但从中删除水平滚动条#container并将其放在上面body（我不想要）
function textVisibility(name) {
var p = document.getElementById(name);
if (p.style.display == "block") {
p.style.display = "none";
} else {
p.style.display = "block";
}
}.div {
margin: 5px;
flex: 0 0 100px;
position: relative;
}
img {
width: 70%;
}
p {
margin: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none;
}
#container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: visible;
}<div id="container">
<div class="div" onmouseenter="textVisibility(1);" onmouseleave="textVisibility(1)">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p id="1">Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div" onmouseenter="textVisibility(2);" onmouseleave="textVisibility(2)">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p id="2">Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div" onmouseenter="textVisibility(3);" onmouseleave="textVisibility(3)">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p id="3">Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div" onmouseenter="textVisibility(4);" onmouseleave="textVisibility(4)">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p id="4">Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div" onmouseenter="textVisibility(5);" onmouseleave="textVisibility(5)">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p id="5">Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div" onmouseenter="textVisibility(6);" onmouseleave="textVisibility(6)">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p id="6">Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>JsFiddle：https：//jsfiddle.net/r3Lja69h/
考虑使用position:fixed并在悬停时动态调整位置：
document.querySelectorAll('.div').forEach((div) => {
div.addEventListener('mouseover', () => {
var r = div.getBoundingClientRect();
div.style.setProperty("--t", r.top+"px");
div.style.setProperty("--l", r.left+"px");
div.style.setProperty("--w", r.width+"px");
});
});.div {
margin: 5px;
flex: 0 0 100px;
text-align:center;
border:1px solid;
}
img {
width: 70%;
}
p {
margin: 0;
position: fixed;
top: var(--t,0);
left:var(--l,0);
width:var(--w,0);
display:none;
}
#container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.div:hover p {
display:block;
}<div id="container">
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
<div class="div">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
<p>Some very long text Some very long text Some very long text Some very long text Some very long text
</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句