0

以下のコードは機能しますが、タブにマウスを合わせると、タブは垂直方向に下向きに拡大します。どうすれば上向きに拡張できますか？

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/

4

2 に答える 2

1

  1. margin-topforyou要素を定義する

  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;
}
于 2013-03-24T17:09:08.357 に答える
0

頭に浮かぶ最も簡単な方法は、要素を比較的配置してから、topプロパティを変更して、ボックスに追加する量だけ上に移動することです。

  1. を非ホバー状態に追加position: relativeします。top: 0

  2. top: -66pxホバー状態に追加します。

これは、このような結果になります。（画面からではなく上に移動するのを確認できるように、上部に余分なスペースを追加したことに注意してください）。

于 2013-03-24T17:06:41.113 に答える