html - 如何垂直/向上过渡？

Question

下面的代码有效，但是当鼠标悬停在选项卡上时，选项卡会垂直向下扩展。如何向上扩展？

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb ;
color: #174867;
padding: 7px 5px 7px 5px;
width: 50px;
height:100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
background: #ebebeb ;
color: #67a5cd;
padding: 80px 5px 0px 5px;
}

<div class="navbox">
<ul class="nav">
<li><a href="#">Bad</a></li>

</ul>
</div>

http://jsfiddle.net/jtwsJ/1/

Answer 1

1. 为你定义一个margin-top元素

2. 在hover通过您增加元素高度的值减少该边距

演示

ul.nav li a {
    -webkit-transition: all 0.3s ease-out;
    background: #cbcbcb ;
    color: #174867;
    padding: 7px 5px 7px 5px;
    width: 50px;
    height:100px;
    margin-top: 200px;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
    margin-top: 100px;
    height: 200px;
    background: #ebebeb ;
    color: #67a5cd;
}

Answer 2

想到的最简单的方法是相对定位元素，然后更改top属性以将其向上移动到您要添加到框中的数量。

1. 添加position: relative和top: 0到非悬停状态。

2. 添加top: -66px到悬停状态。

这会导致这样的事情。（注意我在顶部添加了额外的空间，所以你可以看到它向上移动而不是离开屏幕）。