1

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

但是当我悬停按钮时，按钮下方的项目正在移动。因为，按钮后面的块没有考虑 4px 顶部。所以，看起来不太好。如何克服这个问题..

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

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

我在jsFiddle中更新了我的代码

提前致谢..

4

3 回答 3

0

使用这个 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;
}

这是一个工作小提琴：

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

于 2013-10-08T18:21:52.963 回答
0

更新小提琴：http: //jsfiddle.net/5mhGt/5/。

解决问题的最简单方法是使边框透明：

.btn:hover {
    border-bottom-color: transparent;
}

您不必弄乱其他类似的属性margin-bottom。如果您决定将来更改边框宽度，则不必始终牢记此边距。

于 2013-10-08T18:26:04.097 回答
0

如果您想在动画 :hover 状态时保持边框颜色并防止文本抖动，请尝试将您的按钮包装在相对定位的容器中。

然后，更新你的CSS：

.btn-wrapper {
position: relative;
height: 100px;
}

.btn{
position: absolute;
top: 8px;
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: inline-block;
transition: 0.2s;
}

.btn:hover{
top: 12px;
border: 0px;
}

jsfiddle：http: //jsfiddle.net/BpL2A/

于 2013-10-08T18:30:30.133 回答