html - css标签栏高度问题

Question

我尝试在悬停状态下实现带有额外填充的选项卡栏。但问题在于悬停状态实际上它移动了父 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/

我该如何解决？

Answer 1

您可以通过在非悬停选项卡上使用边距并在悬停时移除它们以抵消增加的填充大小来解决此问题。请注意，边距的大小等于悬停和非悬停填充之间的差异。

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

我已经用 simple demo 更新了你的 jsFiddle这个解决方案。