在表格中更改按钮的颜色

Question

我有一个html表

    <table class="table table-no-bordered table-hover">
        <thead>
          <tr>
            <th>ip</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
                <input type="text" name="ip">
                <button name="nextIpAddress" type="button" class="btn btn-link">Next</button>
            </td>
          </tr>
        </tbody>
    </table>

当我将鼠标悬停时，我的css看起来像

    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th{
        background: #398439 !important;
        color: whitesmoke !important; 
    }

    .btn-link:hover{

    }

仅在表格的情况下，当有按钮时我想显示它的白色文字（如果我悬停链接则相同）

解决方案

.table-hover tbody tr：hover td .btn-link

Answer 1

您需要向表中添加<tbody>元素（请参见下文）或修改CSS选择器。

<table class="table table-no-bordered table-hover">
    <tbody>
      <tr>
          <td>
              <input type="text" name="ip">
              <button name="nextIpAddress" type="button" class="btn btn-link">Next</button>
          </td>
      </tr>
    </tbody>
</table>

或修改CSS

.table-hover tr:hover td, .table-hover tr:hover th{
    background: #398439 !important;
    color: whitesmoke !important; 
}

.btn-link:hover{

}