html - 相对 block 不考虑 div 中的顶部定位

Question

我创建了一个底部边框为 4px 的按钮。悬停按钮时，我将 border-bottom-width 减小为 0px 并添加 top of 4px 以避免影响按钮下方的其他元素。

但是当我将鼠标悬停在按钮上时，按钮下方的元素正在移动。因为，按钮之后的 block 没有考虑 4px 顶部。所以，它看起来不太好。如何克服这个问题..

.btn{
    padding: 30px;
    background-color: #30d589;
    cursor: pointer;
    border-bottom: 4px solid #1b8454;
}

.btn:hover{
    border-bottom-width: 0px;
    top: 4px;
}

我已经在 jsFiddle 中更新了我的代码

提前致谢..

Answer 1

使用这个 CSS:

.btn{
    padding: 30px;
    background-color: #30d589;
    cursor: pointer;
    border-bottom: 4px solid #1b8454;
    display: block;
    float: left;
    box-sizing: border-box;
    transition: all 0.2s linear;
    margin-right: 100%;
}

.btn:hover{
    margin-top: 4px;
    border-bottom-width: 0px;
}

这是一个有效的 fiddle :

http://jsfiddle.net/Hive7/5mhGt/2/