0

我有一个主要包含按钮但也包含一个锚的列表。

编辑：每个按钮/锚在其非悬停状态下都有一个 1px 边框

当我将鼠标悬停在任何上时，我会在or上<li>添加一个2px 圆角<a><button>

为了<li>在悬停时不会“跳跃”，我将宽度、高度设置为<li>比按钮/锚点多 4px

我已经display:block锚定了。

为什么我的<a>元素看起来与<button>?

小提琴

即使我添加以下内容来修复锚点的对齐方式：

a.btn:before {
    content: '';
    margin-top: 14px;
}

（小提琴）

...我仍然在锚点上获得悬停“跳跃”效果。

我怎样才能解决这个问题？

标记

<ul class="choices">
    <li class="source">
        <a href="#" class="btn">Link</a>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn1</button>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn2</button>
    </li>
    <li class="source">
        <button type="button" class="btn">Btn3</button>
    </li>
</ul>

CSS

*
{
    margin:0;padding:0;
}
ul
{
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    background: yellow;
}
a, button /*reset default styles */
{
    margin:0;padding:0;border:0;
    background:transparent;
    outline: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-appearance:none;
    line-height: normal;
    font-family: inherit;
    font-size: 100%;
}
.choices{
    text-align: justify;
}
.choices:after{
    content: '';
    width: 100%;
    display: inline-block;
}
.source{
    width: 122px;
    height: 112px;
    display:inline-block;
}   
.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
}
.btn:hover {
    border: 2px solid #952262;
    background: #f4f4f4;
}
.btn:before {
    content: '';
    display: block;
    background: url(http://placehold.it/50x50) no-repeat;
    margin: 0 auto 10px;
    width: 50px;
    height: 50px;
}
4

3 回答 3

1

在正常状态下添加一个 1px 的内边距，在悬停状态下再次移除：

.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
    padding: 1px; /** Set it here **/
}
.btn:hover {
    border: 2px solid #952262;
    background: #f4f4f4;
    padding: 0; /** Unset it here **/
}
于 2013-08-13T14:38:18.347 回答
0

好吧，不用解释为什么你的代码有问题，修复它的最简单方法是为你的 .btn 类添加一个透明边框

.btn{
    border-radius: 5px;
    background: #faf9fa;
    border: 1px solid #dcdcdc;
    width: 118px; /* to take into account the 2px border on hover - */
    height: 108px; /* I make the button a little smaller than the li */
    font-size: 14px;
    color: #111; 
    float:left; 
    display:block;
    text-align: center; /*needed for the <a> tag  */
    border:2px solid transparent;
}

JSFIDDLE

于 2013-08-13T12:27:53.497 回答
0

检查这个更新小提琴

实际上我添加了一些边框.btn和a.btn悬停状态

于 2013-08-13T12:30:46.170 回答