html - 按钮悬停效果拉起下方段落

Question

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

这工作正常，但是它影响了我不希望它做的其他元素。例如，它将下面的段落拉上来。这是一个 JSFiddle 示例:

http://jsfiddle.net/kD6dQ/

当您将鼠标悬停在按钮上时，您可以看到下面的段落改变了位置。我该如何阻止它？

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

Answer 1

你为你的元素使用了top。当更改为 margin-top 时，它起作用了。

fiddle

CSS:

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