Question

我正在尝试为Bootstrap 3中的默认按钮创建一个奇特的按钮悬停状态。基本上，该按钮以4px的border-bottom开始，当悬停时，它会缩小为2px。因此，我在按钮上使用top: 2px进行补偿。

这样可以正常工作，但是它会影响我不希望它做的其他元素。例如，它将下面的段落拉出来。这是一个JSFiddle示例：

您可以看到当您将鼠标悬停在按钮上时，下方的段落会更改位置。我该怎么做呢？

我已在最新版本的Chrome和Firefox中对此进行了测试。

Answer 1

您使用top作为元素。当更改为margin-top时，它可以正常工作。

的CSS：

.btn-default:hover {
    background: #eba22b;
    color: white;
    border-bottom: 2px solid #db9016;
    margin-top: 2px;
}

Answer 2

尝试使用悬停声明：

.btn-default:hover {
    background: #eba22b;
    color: white;
    border-bottom: 2px solid #db9016;
    top: 2px;
    margin-bottom: 2px;
}

Answer 3

解决此问题的最佳方法是简单地将高度添加到.btn-default

E.G： height: 35px;