如何修复溢出问题（只是溢出可见）？

时间：2017-10-12 08:55:21

标签： html css

所以我的网页上有一个tablider和一个类似于上面阶段的图像。 现在，当我将鼠标悬停在<li>上时，我想弹出一些文字。 因为我的列表实际上是我需要将overflow-x设置为hidden。现在的问题是我的<span class="info">也会被隐藏。如果我设置overflow-x: hidden;和overflow-y: visible;，我的<ul>可以滚动到顶部。但我的<span class="info">仍被隐藏。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新

它看起来如何： enter image description here

它应该如何： enter image description here

使用Chrome 61.0.31

更新2： 我需要将<ul>设置为overflow-x：hidden！

4 个答案:

答案 0 :(得分：1)

你必须使包装器溢出可见并且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之外切换一些方法，将鼠标悬停在ul＆gt;上李。像这样：

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

答案 1 :(得分：0)

将此css提供给img标签以获取响应式img。

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}


.element-wrapper {
  position: relative;
}

ul { 
  height: 40px;
}

li {
  list-style: none;
  display: inline;
  padding: 0 30px;
  position: relative;
}

.info {
  position: absolute;
  bottom: 60px;
  left: 0;
  border: 2px solid red;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
<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>

答案 2 :(得分：0)

立即检查它是否悬停显示

.element-wrapper {
position: relative;
}

ul {
  height: 40px;
}

li {
  list-style: none;
  display: inline;
  padding: 0 30px;
  position: relative;
}

li .info{
  display:none;
}

li:hover .info
{
display:block;
  position: absolute;
  bottom: 60px;
  left: 0;
  border: 2px solid red;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
<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>

答案 3 :(得分：0)

我通过使用工具提示解决了这个问题。这与此图像重叠。 我使用qTip2作为jQuery-Plugin。所以我可以为我的工具提示设置位置和样式。

相关问题
最新问题