1

ホバー状態で追加のパディングを使用してタブバーを実装しようとしています。しかし、問題はホバー状態で実際には親divを移動します。

以下の html を参照してください。

<div id="statNav">
        <a href="#">Gogus</a>
        <a href="#">Kol</a>
        <a href="#">Gogus</a>
        <a href="#">Gogus</a>
        <a href="#">Gogus</a>
        <a href="#">Omuz</a>
        <a href="#">Gogus</a>
</div>

そしてcss;

#statNav{
    width:100%;
    border-bottom:2px solid #9B2F2C;
    overflow:auto;
}

#statNav a{
    float:left;
    background-color:#333333;
    color:white;
    font-size:12px;
    font-weight:bold;
    text-align:center;
    width:62px;
    padding-top: 5px;
    padding-bottom:5px;
    border-right: 1px solid #777777;
}

#statNav a:first-child{

    -webkit-border-radius: 5px 0px 0px 0px;
    border-radius: 5px 0px 0px 0px;
}

#statNav a:last-child{

    -webkit-border-radius: 0px 5px 0px 0px;
    border-radius: 0px 5px 0px 0px;
    border-right:none;
    width:63px;
}

#statNav a:hover{

    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background-color:#9B2F2C;
    padding-top: 15px;
}

これが実際のサンプルです。

http://jsfiddle.net/Kg3p4/

どうすれば解決できますか？

4

2 に答える 2

2

ホバーされていないタブでマージンを使用し、ホバー時にそれらを削除して、パディングサイズの増加に対抗することで、これを解決できます。マージンのサイズは、ホバーしたパディングとホバーしていないパディングの差に等しいことに注意してください。

#statNav a{
    margin-top: 10px;
    padding-top: 5px;
}
#statNav a:hover{
    margin-top: 0;
    padding-top: 15px;
}

このソリューションの簡単なデモでjsFiddle を更新しました。

于 2013-04-01T19:27:54.940 に答える