Html 如何解决溢出问题（仅溢出y可见）？_Html_Css

Html 如何解决溢出问题（仅溢出y可见）？
html css
Html 如何解决溢出问题（仅溢出y可见）？,html,css,Html,Css,所以我在我的网页上有一个标签滑块和一个类似于上面舞台的图像。现在，当我将鼠标悬停在上时，我想弹出一些文本。因为我的列表实际上是隐藏的，所以我需要将overflow-x设置为hidden。现在的问题是我的也将被隐藏。如果我设置overflow-x:hidden和溢出-y：可见我的可以滚动到顶部。但是我的仍然隐藏。列表包装器{ 溢出x：隐藏；溢出y：可见； } 保险商实验室{ 溢出x：隐藏；溢出y：可见；高度：40px； } 李{ 列表样式：无；显示：内联；填充：0 40px；位
所以我在我的网页上有一个标签滑块和一个类似于上面舞台的图像。现在，当我将鼠标悬停在
上时，我想弹出一些文本。因为我的列表实际上是隐藏的，所以我需要将overflow-x设置为hidden。现在的问题是我的
也将被隐藏。如果我设置
overflow-x:hidden和溢出-y：可见我的
可以滚动到顶部。但是我的
仍然隐藏

。列表包装器{
溢出x：隐藏；
溢出y：可见；
}
保险商实验室{
溢出x：隐藏；
溢出y：可见；
高度：40px；
}
李{
列表样式：无；
显示：内联；
填充：0 40px；
位置：相对位置；
}
.info{
位置：绝对位置；
底部：60px；
左：0；
边框：2倍纯红；
}


应在图像上方弹出的第一个信息
应在图像上方弹出的第二条信息
应在图像上方弹出的第三条信息
应在图像上方弹出的其他信息
应在图像上方弹出的其他信息

将此css发送给img标签，用于响应img
img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}


.element包装器{
位置：相对位置；
}
ul{
高度：40px；
}
李{
列表样式：无；
显示：内联；
填充：0 30px；
位置：相对位置；
}
.info{
位置：绝对位置；
底部：60px；
左：0；
边框：2倍纯红；
}
img{
宽度：自动；
高度：自动；
最大宽度：100%；
最大高度：100%；
}


应在图像上方弹出的第一个信息
应在图像上方弹出的第二条信息
应在图像上方弹出的第三条信息
应在图像上方弹出的其他信息
应在图像上方弹出的其他信息

您必须使包装溢出可见，并设置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;
}

    <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>

编辑
唯一可以做到这一点的方法是使用javascript并在ul>li上切换ul之外的一些框。大概是这样的：
.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;
}

    <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>


.元素包装器{
位置：相对位置；
}
.元素包装器img{
宽度：100%；
}
.列表包装器{
溢出x：隐藏；
溢出y：可见；
}
.悬停包装{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
}
.hover_wrapper.info{
宽度：19%；
显示：内联块；
可见性：隐藏；
位置：相对位置；
}
保险商实验室{
溢出x：隐藏；
溢出y：可见；
高度：40px；
}
李{
列表样式：无；
显示：内联；
填充：0 40px；
位置：相对位置；
}
.info{
位置：绝对位置；
底部：60px；
左：0；
边框：2倍纯红；
}
$（文档）.ready（函数（）{
$（'.text'）.hover（函数（）{
$（'.info[data id=“'+$（this）.data（'hover'）+'“]'））.css（'visibility'，'visible'）；
}，函数（）{
$（'.info[data id=“'+$（this）.data（'hover'）+'“]'））.css（'visibility'，'hidden'）；
});
});
应在图像上方弹出的信息
应在图像上方弹出的信息
应在图像上方弹出的信息
应在图像上方弹出的信息
应在图像上方弹出的信息

首先
第二
第三
其他
其他

现在检查它是否显示在悬停状态

.element包装器{
位置：相对位置；
}
保险商实验室{
高度：40px；
}
李{
列表样式：无；
显示：内联；
填充：0 30px；
位置：相对位置；
}
李。信息{
显示：无；
}
李：悬停。信息
{
显示：块；
位置：绝对位置；
底部：60px；
左：0；
边框：2倍纯红；
}
img{
宽度：自动；
高度：自动；
最大宽度：100%；
最大高度：100%；
}


应在图像上方弹出的第一个信息
应在图像上方弹出的第二条信息
应在图像上方弹出的第三条信息
应在图像上方弹出的其他信息
应在图像上方弹出的其他信息

我通过使用工具提示修复了此问题。这与此图像重叠。
我用它作为jQuery插件。所以我可以为我的工具提示设置位置和样式。
但这并不能显示我的位置和样式@ankita patelcan你可以分享任何截图吗？当然可以：）我更新了我的帖子。当我编辑你的代码时，它也是这样的@ankita Patethank感谢你的回答。但我的问题是，我需要将我的设置为overflow-x:overflow。因为它是一个选项卡滑块，不应该溢出。使用此解决方案，我的信息文本将显示，但我的列表不再溢出。谢谢您的回答。但我的问题是，我需要将我的设置为overflow-x:overflow。因为它是一个选项卡滑块，不应该溢出。使用此解决方案，我的信息文本将显示，但我的列表不再溢出。谢谢您的回答。但我的问题是，我需要将我的设置为overflow-x:overflow。因为它是一个选项卡滑块，不应该溢出。使用此解决方案，将显示我的信息文本，但我的列表不再溢出。