html - 当其他 sibling 淡出时如何调整一个div不移动

Question

有一个 bid div (leftBox) 保存到内部的 div:LeftBox-InnterTop 和 LeftBox-InnterButtom。第一个内部 div 有 90% 的高度，另一个有 10%。通常第一个内部 div (LeftBox-InnterTop) 是隐藏的，当鼠标悬停在一般 div 中时淡入。

我的问题是当兄弟 div 被隐藏时类 LeftBox-InnterButtom 转到顶部。它应该留在盒子的底部。即使隐藏了另一个潜水，我怎样才能让它坚持到底部？

这是 CSS 和 HTML 代码:

.leftBox {
float:left;
width:300px;
height:300px;
background:url(http://goo.gl/Z3Escd);
}
.LeftBox-InnterTop {
    width:100%;
    height:90%;
    background: rgba(255, 255, 255, 0.50);
}
.LeftBox-InnterButtom {
    width:100%;
    height:10%;
    background: rgba(0, 0, 0, 0.80);
}

HTML:

<div class="leftBox">
        <div class="LeftBox-InnterTop">
            <div class="SmallBoxes"></div>
            <div class="SmallBoxes"></div>
            <div class="SmallBoxes"></div>
            <div class="SmallBoxes"></div>
        </div>
        <div class="LeftBox-InnterButtom"></div>
</div>

演示:http://jsfiddle.net/danials/X7VTE/2/

Answer 1

而不是使用 fadeIn() 和 fadeOut()。只需通过 css 更改 visibility。这样元素就不会从页面结构中删除:http://jsfiddle.net/X7VTE/11/ .

顺便说一下，您尝试做的事情可以 100% 在 CSS 中实现。无需使用 jQuery。