javascript - 在鼠标悬停时更改按钮文本，调整整个按钮的大小

Question

我有一个恼人的问题，我希望 Bootstrap 按钮的大小固定。当我滚动 Bootstrap 按钮时，它会调整整个按钮的大小。我使用 javascript 来更改文本(鼠标悬停和鼠标移出)。我怎样才能禁用它，使按钮保持相同的大小，只有文本发生变化？

示例按钮:

<button type='button' id='Warning' class='btn btn-warning btn-block text-left' data-toggle='modal' data-target='#myModal'>Pending</button>

Javascript:

    $('body').on('mouseover', '#Success', function (e) {
        $(this).removeClass("btn-success");
        $(this).addClass("btn-danger");
        $(this).text('Deactivate?');
    });
    $('body').on('mouseover', '#Warning', function (e) {
        $(this).removeClass("btn-warning");
        $(this).addClass("btn-success");
        $(this).text('Activate?');
    });

Answer 1

如果 2 个文本标签的可见宽度不同，则按钮必须更改大小以适应文本。

您应该通过 CSS 设置一个固定大小的按钮，该大小足以容纳任一文本标签:

#Warning {
    width: 200px;
}

如果不查看更多标记，就很难知道这会如何影响其他布局元素。

你可以尝试给按钮一个 auto 水平边距:

#Warning {
    width: 200px;
    margin: 0 auto;
}

或者您可能需要明确地将按钮置于其容器的中心:

.class-name-of-the-buttons-parent-container {
    text-align: center;
}