html – CSS过渡和自动定位

概述我有一个div .box,其父绝对位置设置在父div的底部.它没有设置顶部位置,因为不同的.box div的高度不同.将鼠标悬停在父div上时,我想通过过渡效果将其顶部位置更改为0. 如果我没有默认定义顶部位置,则以下代码转换不起作用.我尝试过使用top：auto但它仍然无效.如何在不定义顶部位置的情况下使用过渡. 这是我的代码： HTML： <div class="wrap"> <div 我有一个div .Box,其父绝对位置设置在父div的底部.它没有设置顶部位置,因为不同的.Box div的高度不同.将鼠标悬停在父div上时,我想通过过渡效果将其顶部位置更改为0.

如果我没有默认定义顶部位置,则以下代码转换不起作用.我尝试过使用top：auto但它仍然无效.如何在不定义顶部位置的情况下使用过渡.

这是我的代码：

HTML：

<div >    <div >        Box    </div></div>

CSS：

.wrap{    position: relative;    height: 200px;    wIDth: 200px;    background: green;}.Box{    background: yellow;    position: absolute;    bottom: 0;    left: 0;    Transition: all  0.9s ease 0s;    top: 50%; /*== does not work without it ==*/}.wrap:hover .Box{    top: 0;    bottom: 0;}

小提琴：http://jsfiddle.net/5hs09apn/

解决方法 与使用top： http://jsfiddle.net/5hs09apn/2/略有不同的方法

设置框的高度,并在悬停时将其设置为100％;让底部为零,所以你甚至不需要使用顶部

.Box{    background: yellow;    position: absolute;    bottom: 0;    left: 0;   height:20px;    Transition: all  1s ease 0s;}.wrap:hover .Box{   height:100%;    bottom: 0;}

.wrap {  position: relative;  height: 200px;  wIDth: 200px;  background: green;}.Box {  background: yellow;  position: absolute;  bottom: 0;  left: 0;  height: 20px;  Transition: all 1s ease 0s;}.wrap:hover .Box {  height: 100%;  bottom: 0;}

<div >  <div >    Box  </div></div>

总结

以上是内存溢出为你收集整理的html – CSS过渡和自动定位全部内容，希望文章能够帮你解决html – CSS过渡和自动定位所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。