按钮文本仅在鼠标悬停时可见答案

【问题标题】：Button text only visible when hovered over with mouse按钮文本仅在鼠标悬停时可见
【发布时间】：2022-02-11 20:12:23
【问题描述】：

按钮上的文本（在这种情况下为删除）仅在鼠标悬停时可见。这是一个有角度的项目，即使我尝试为 .btn 提供 css 也不会被覆盖

background-color: blue;

Button's text not visible	Button's text visible only when hovered over with mouse

这是我的按钮 html 代码：

<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white;">Remove</button>

这是 style.css 中按钮的 css ：

 .btn-info{
    color:#fff;
    background-color:#0da8e4!important;
    border-color:#0da8e4!important
}

a.primary-btn{
    background:#05143f;
    padding:7px 20px;
    text-align:center;
    display:inline-block;
    color:#fff;
    border-radius:2px;
    font-size:14px;
    margin-top:5px
}
a.primary-btn:hover{
    background:#0da8e4;
    color:#fff
}

.active-link {
  font-weight: bold;
}

【问题讨论】：

标签： html css angular bootstrap-5

【解决方案1】：

当按钮位于表格内时，我遇到了类似的问题。表的引导类干扰了按钮引导类。

请把按钮放在<thead></thead>或<tbody></tbody>里面

<table class="table table-hover" style="cursor:pointer">
  <thead>
    <tr>
      <th style="width: 20%;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <button (click)="remove(item)" class="btn btn-primary">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

你的 html 按钮标签上有 btn-primary 作为类，但在你的 css 中它是 primary-btn，所以实际上你的 css 不应该解决你的问题。

至于为什么你的文字不显示，据我所知，你将文字着色为白色，而按钮也是白色的，所以应该显示文字，更多的是你的背景颜色的问题。

最简单的解决方案是：

<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white; background-color: blue;">Remove</button>

【讨论】：