Question

所以我得到一个while循环显示名称和一些css和jquery来实现它，所以当你将鼠标悬停在while循环中的一个方框上时，它会有一些描述，告诉你结果向上滚动。但问题是所有描述框都相互重叠。我做错了什么？

的CSS

  .App_display { 
        border: 2px solid black; 
    padding:30px; 
    background:white;  
    border-radius:25px;
    float:left;
    width:190px;
    height:100px;
    margin:10px;
 }

.boxTop { position:absolute; z-index:9; top:0; left:0; height:inherit; width:inherit;
          overflow:hidden;}
.description { position:absolute; bottom:-50px; height:40px; width:459px; background-color:#000; opacity:.7; font-size:16px; color:#fff; padding:10px; }

Jquery的

<script>
$('.App_display').hover(function() {
    $(this).find('.description').stop().animate({
        bottom: '0px',
    })
},

function() {
    $(this).find('.description').stop().animate({
        bottom: '-50px',
    })
});
</script>

Html（此代码在while循环中生成）

<div class="App_display">
    <div class="boxTop">
        <div class="description"><?php echo $name; ?></div>
    </div>

</div>

  .App_display { 
        border: 2px solid black; 
    padding:30px; 
    background:white;  
    border-radius:25px;
    float:left;
    width:190px;
    height:100px;
    margin:10px;
 }

.boxTop { position:absolute; z-index:9; top:0; left:0; height:inherit; width:inherit;
          overflow:hidden;}
.description { position:absolute; bottom:-50px; height:40px; width:459px; background-color:#000; opacity:.7; font-size:16px; color:#fff; padding:10px; }

       <div class="App_display">
            <div class="boxTop">
                <div class="description">Item1</div>
            </div>
        </div>
        <div class="App_display">
            <div class="boxTop">
                <div class="description">Item2</div>
            </div>
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
        $('.App_display').hover(function() {
            $(this).find('.description').stop().animate({
                bottom: '0px',
            })
        },

        function() {
            $(this).find('.description').stop().animate({
                bottom: '-50px',
            })
        });
        </script>

Answer 1

当你使用位置绝对时，在css中

它将设置元素相对于第一个非静态祖先元素的位置，在你的情况下可能是窗口。所以你需要将下一个祖先设置为非静态位置然后它将解决你的问题

将此行添加到App_display类：

 .App_display { 
        position:relative;
 }

盒子相互重叠

1 个答案: