当鼠标悬停在按钮上时才显示文本。

Question

按钮上的文本（在这种情况下为“Remove”）只有在鼠标悬停时才可见。这是一个Angular项目，即使我尝试为“.btn”给出CSS，它也不会被覆盖。

background-color: blue;

按钮文本不可见	仅当鼠标悬停时才可见的按钮文本

这是我的按钮的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;
}

- Prakhar Shukla

Answer 1

当按钮位于表格内时，我遇到了类似的问题。表格的Bootstrap类与按钮的Bootstrap类产生了冲突。

请将按钮放置在<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>

- Sampath

Answer 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>

- Caliph Hamid

Answer 3

我遇到了同样的问题。你需要在这个按钮周围加上额外的div标签。

<div><button (click)="remove(tempCartItem)" class="btn btn-primary btn-sm">Remove</button></div>

- rocky34580

---

你的答案可以通过附加支持信息来改进。请编辑以添加更多细节，如引用或文档，以便他人能够确认你的答案是否正确。你可以在帮助中心找到有关撰写好答案的更多信息。 - Community