所以我的网页上有一个标签 slider 和一个类似于上面的舞台的图像。
现在，当我将鼠标悬停在 <li> 上时，我想弹出一些文本。 .
因为我的列表实际上是我需要将 overflow-x 设置为隐藏。现在的问题是我的<span class="info">也会被隐藏。如果我设置 overflow-x: hidden;和 overflow-y: visible;我的<ul>可以滚动到顶部。但是我的<span class="info">仍然是隐藏的。
.list-wrapper {
overflow-x: hidden;
overflow-y: visible;
}
ul {
overflow-x: hidden;
overflow-y: visible;
height: 40px;
}
li {
list-style: none;
display: inline;
padding: 0 40px;
position: relative;
}
.info {
position: absolute;
bottom: 60px;
left: 0;
border: 2px solid red;
}<div class="wrapper">
<div class="element-wrapper">
<!--<div class="image"></div>-->
<img src="http://via.placeholder.com/750x150">
<div class="list-wrapper">
<ul>
<li><a class="link"><span class="text">first</span><span class="info">Information that should popup above the image</span></a></li>
<li><a class="link"><span class="text">Seconde</span><span class="info">Information that should popup above the image</span></a></li>
<li><a class="link"><span class="text">Third</span><span class="info">Information that should popup above the image</span></a></li>
<li><a class="link"><span class="text">Other</span><span class="info">Information that should popup above the image</span></a></li>
<li><a class="link"><span class="text">Other Other</span><span class="info">Information that should popup above the image</span></a></li>
</ul>
</div>
</div>
</div>更新
外观:
它应该是这样的:
使用 Chrome 61.0.31
更新 2:
我需要设置我的 <ul>溢出-x:隐藏!
最佳答案
您必须使包装器溢出可见并且 ul 也必须设置 ul 和 li 位置的初始位置并仅在悬停时触发事件，如下所示:
.list-wrapper {
position: relative;
}
ul {
height: 40px;
position: initial;
}
li {
list-style: none;
display: inline;
padding: 0 40px;
position: initial;
}
li:hover .info {
display: block;
}
.info {
position: absolute;
bottom: 60px;
left: 0;
border: 2px solid red;
display: none;
}
编辑
您可以做到这一点的唯一方法是使用 javascript 并在将鼠标悬停在 ul > li 上时切换 ul 外部的一些框。像这样:
<html>
<head>
<style>
.element-wrapper {
position: relative;
}
.element-wrapper img {
width: 100%;
}
.list-wrapper {
overflow-x: hidden;
overflow-y: visible;
}
.hover_wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.hover_wrapper .info {
width: 19%;
display: inline-block;
visibility: hidden;
position: relative;
}
ul {
overflow-x: hidden;
overflow-y: visible;
height: 40px;
}
li {
list-style: none;
display: inline;
padding: 0 40px;
position: relative;
}
.info {
position: absolute;
bottom: 60px;
left: 0;
border: 2px solid red;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$('.text').hover(function () {
$('.info[data-id="' + $(this).data('hover') + '"]').css('visibility', 'visible');
}, function () {
$('.info[data-id="' + $(this).data('hover') + '"]').css('visibility', 'hidden');
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="element-wrapper">
<!--<div class="image"></div>-->
<img src="http://via.placeholder.com/750x150">
<div class="hover_wrapper">
<span class="info" data-id="1">Information that should popup above the image</span>
<span class="info" data-id="2">Information that should popup above the image</span>
<span class="info" data-id="3">Information that should popup above the image</span>
<span class="info" data-id="4">Information that should popup above the image</span>
<span class="info" data-id="5">Information that should popup above the image</span>
</div>
<div class="list-wrapper">
<ul>
<li><a class="link"><span class="text" data-hover="1">first</span></a></li>
<li><a class="link"><span class="text" data-hover="2">Seconde</span></a></li>
<li><a class="link"><span class="text" data-hover="3">Third</span></a></li>
<li><a class="link"><span class="text" data-hover="4">Other</span></a></li>
<li><a class="link"><span class="text" data-hover="5">Other Other</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
关于html - 如何解决溢出问题(只是 overflow-y 可见)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46705357/