表格行没有突出显示悬停在上面

Question

出于某种原因，我无法突出显示整行。如果我将悬停在td标记上，我可以获得该行的1个部分以突出显示，但我希望表格的整行突出显示。

我使用sass和Vue.js - 但Vue.js不应该干扰

HTML ...

                  <table id="tblData">
                     <thead>
                         <tr>
                       <th v-for="column in columns">
                         {{ column | uppercase }}
                           </th>
                          </tr>
                       </thead>
                   <tbody>
                   <tr v-for="tableData in tableData">
                      <td>
                          {{ tableData.client }}
                      </td>
                      <td>
                          {{ tableData.ad }}
                      </td>
                      <td>
                          {{ tableData.rt }}
                      </td>
                   </tr>
                   </tbody>
                </table>

CSS

table {
  border: 2px solid #000;
  border-radius: 3px;
  background-color: #fff;

}

th {
  background-color: lightgrey;
}

td {
  background-color: #f9f9f9;
  /*
  &:hover {
    background-color: yellow;   //makes just 1 element highlight on hover
  }
  */
}

th, td {
  min-width: 120px;
  padding: 10px 20px;
}

tr:hover {
    background-color: yellow;
}

Answer 1

AFAIK，你不能改变tr上的背景颜色，试试下面的代码，这会在tr徘徊时改变每个td的背景颜色

tr:hover td {
    background-color: yellow;
}

Answer 2

尝试在!important等属性的末尾添加background-color: yellow !important;以强制进行更改。