有一个 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>
最佳答案
而不是使用 fadeIn() 和 fadeOut()。只需通过 css 更改 visibility
。这样元素就不会从页面结构中删除:http://jsfiddle.net/X7VTE/11/ .
顺便说一下,您尝试做的事情可以 100% 在 CSS 中实现。无需使用 jQuery。
关于html - 当其他 sibling 淡出时如何调整一个div不移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24566066/