Question

我尝试制作悬停效果。当用户徘徊一个div时，它会进入绝对位置并改变它的高度。这是代码：

＆＃13;

    @import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';

.child {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 48px;
}

.child:hover {
    position: absolute;
    z-index: 3;
    border: 1px solid #c0c0c0;
}

.child .sub-child { display: none; }
.child:hover .sub-child { display: block; }

＆＃13;

    <div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-4">
            <div class="child">
                First
                <ul class="sub-child">
                    <li>First</li>
                    <li>Second</li>
                </ul>
            </div>
        </div>
        <div class="col-xs-4 col-md-4">
            <div class="child">Second</div>
        </div>
        <div class="col-xs-4 col-md-4">
            <div class="child">
                Third
                <ul class="sub-child">
                    <li>First</li>
                    <li>Second</li>
                    <li>Third</li>
                    <li>Fourth</li>
                    <li>Fifth</li>
                </ul>
            </div>
        </div>
        <div class="col-xs-4 col-md-4">
            <div class="child">Fourth</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">Some text here</div>
    </div>
</div>

＆＃13;

问题在于，当悬停转到行中的最后一个元素或列表中的最后一个元素时，内容会重叠。我该如何解决这个问题？

Answer 1

我不确定你是否采取了正确的方法，但我做了一些调整，包括在第一行添加父div以增加一些余量，以便它们不重叠：

http://codepen.io/anon/pen/QbVewL

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';

.menu{
  margin-bottom: 20px;
}

.child {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 48px;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.child:hover {
    position: absolute;
    z-index: 3;
    border: 1px solid #c0c0c0;
    height: 62px;
    background-color: #fff;
}

清除绝对浮动元素

1 个答案: