Tabellenzeile nicht hervorgehoben mit schwebte über

Question

Aus irgendeinem Grund kann ich nicht meine gesamte Zeile zu markieren. Wenn ich den Mauszeiger auf das Tag-Tag setze, kann ich einen Abschnitt der Zeile markieren, aber ich möchte die gesamte Zeile der Tabelle hervorheben.

Ich verwende Sass und Vue.js - aber die Vue.js sollte nicht

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> 

die 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, können Sie keine Hintergrundfarbe auf einem tr ändern, versuchen Sie den folgenden Code, das wird die Hintergrundfarbe der einzelnen td ändern, wenn ein tr

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

Answer 2

Versuch stören Hinzufügen !important am Ende des Attributs wie background-color: yellow !important;, um die Änderung zu erzwingen.