当鼠标悬停时更改按钮文本并调整整个按钮大小。

Question

我有一个烦人的问题，希望Bootstrap按钮的大小保持不变。目前当我在按钮上滚动时，整个按钮会重新调整大小。我使用JavaScript更改文本（mouseover和mouseout）。如何禁用此功能，以使按钮保持相同的大小，只更改文本？ 示例按钮：

<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?');
    });

- G Gr

Answer 1

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

您应该通过CSS设置一个固定大小的按钮，足够大以适应任何文本标签：

#Warning {
    width: 200px;
}

没有看到更多的标记，很难知道这对其他布局元素有何影响。

你可以尝试在水平方向上给按钮添加一个auto边距：

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

或者你需要在容器中明确居中按钮：

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

- duncanhall

---

这样修复了问题，但是因为按钮嵌套在数据表中，它似乎将按钮向左拖动，并在其所嵌套的列的右侧留下间隙？ - G Gr

Answer 2

我建议给按钮一个固定的宽度，足够适应两种状态，并去掉水平填充。可选地，您可以给它text-align:center

- Nojan

Answer 3

在鼠标悬停事件期间冻结按钮的宽度和高度。此外，将其填充设置为0以保持文本居中：

$('body')
  .on('mouseover', '#Warning', function (e) {
    $(this).css({
      width: $(this).outerWidth(),
      height: $(this).outerHeight(),
      padding: 0
    });
    $(this).text('Activate?');
  })
  .on('mouseout', '#Warning', function (e) {
    $(this).text('Pending');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Warning'>Pending</button>

- Rick Hitchcock

---

这会在鼠标悬停时添加间隙。在鼠标移开后，它也不会回去。 - G Gr

Answer 4

你应该添加一个额外的CSS类，覆盖Bootstrap默认按钮样式。例如...

.fixed_size_button {
    width: 200px;
}

在某些情况下，您可能需要添加!important来实际覆盖先前的CSS设置，特别是因为Bootstrap本身使用了大量的!important语句。例如：

.fixed_size_button {
    width: 200px !important;
}

但是你应该尽可能避免这样做，因为它很难维护。

- Falk Schuetzenmeister

---

虽然你的解决方案可以运行，但我强烈推荐不要使用!important。这正是CSS专指性的用武之地。 - Micah Henning

同意。但是有时候，如果你使用了复杂的CSS框架，并且想保留原始的CSS代码不变，这是必要的。我在使用Bootstrap时遇到过这样的情况。然而，在这里可能并不需要这样做。 - Falk Schuetzenmeister

在这种情况下，您只需使CSS语句更具体。最少，您可以提高特异性，然后确保您的样式表在CSS框架之后加载。 - Micah Henning

这个踩票是不公平的。由于Bootstrap CSS代码在各个地方都使用了!important，即使自定义CSS在Bootstrap之后加载，为了恢复通常的解析顺序，可能确实需要使用!important。 - Falk Schuetzenmeister