当我将鼠标悬停在桌面上时，为什么我的桌子行不会改变背景颜色？

Question

当我将鼠标悬停在其上时，我正试图让我的表格行具有不同的背景颜色。所以我把它包含在我的样式表中

table tbody tr:hover {
  background-color: #F6F8F9
}

<table id="subscriptions-table">
  <thead>
    <tr>
      <th>Subscription</th>
      <th>Download</th>
    </tr>
  </thead>
  <tbody>
    <tr class="even subscription-row header">
      <td class="ig-header-title ellipsis">
        <img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon" />
        <a class="name ellipsis" href="/scenarios/18">My #1 Scenario</a>
      </td>
      <td align="center">
        <a href="/scenarios/18/download">
          <img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

这是演示问题的小提琴 - https://jsfiddle.net/uwddax6j/。

Answer 1

如果您将颜色更改为与当前背景颜色不同的颜色，则此方法有效。

试试这个：

table tbody tr:hover {
    background-color: green;
}