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。

Answer 2

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

#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/

css标签栏高度问题

2 个答案: