为什么当我将鼠标悬停在表格行上时它不会改变背景颜色？答案

【问题标题】：Why won't my table row change background color when I hover over it?为什么当我将鼠标悬停在表格行上时它不会改变背景颜色？
【发布时间】：2017-04-28 23:39:57
【问题描述】：

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

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>

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

【问题讨论】：

在那个小提琴中，您将悬停背景颜色设置为默认 jsfiddle 背景的确切颜色。尝试将其更改为红色，它可以正常工作。
制作一个 Stack Snippet 而不是 JSFiddle，您会看到它按原样工作。

标签： css hover html-table row

【解决方案1】：

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

试试这个：

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

【讨论】：

请不要回答不是实际编程问题的问题。这个答案没有真正的用处，因为这个问题实际上没有错。