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 回答
0

您可以通过添加等于填充差异的负边距底部来稍微修改悬停状态。像这样的东西：

#statNav a:hover{

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

http://jsfiddle.net/Kg3p4/5/

于 2013-04-01T19:26:52.933 回答