Ich kann die Tabellenzeile nicht ändern, wenn ich schwebe

Question

Ich habe Hover-Farbwechsler für Tabellendaten erstellt, aber ich möchte es für die gesamte Tabellenzeile ändern, aber es funktioniert nicht, wenn ich td: hover to tr: hover. Was mache ich falsch?

JsFiddle: https://jsfiddle.net/uwvvmpok/

HTML:

<div class="content"> 
<div class="header"> 
</div> 

<a name="172016"> 
<!--1. riadok H--> 
<table cellspacing="0" cellpadding="0" border="0"> 
<tr> 
<th width="50px">C. u.</th> 
<th width="30px">Zobrazit</th> 
<th width="30px">Typ</th> 
<th width="200px">Cislo/Meno</th> 
<th width="600px">Popis</th> 
<th width="130px">System</th> 
<th width="100px">Dopad/Symptom</th> 
<th width="100px">Dátum zadania</th> 
<th width="100px">Dátum vzniku</th> 
<th width="100px">Datum Verifikacie</th> 
<th width="80px">Ukoncenie</th> 
<th width="500px">Komentár</th> 
<th width="100px">Dátum</th> 
<th width="60px">Počet</th> 
</tr> 
<!--2. riadok D--> 
<tr> 
<td style="text-align:center;background-color: #d0f5f6">100</td> 
<td style="text-align:center">X</td> 
<td style="text-align:center">C </td> 
<td>DOBRIKOVA/DURACKA</td> 
<td class="tooltip">Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="ttext">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span> </td> 
<td>CORAIL/CONSO</td> 
<td></td> 
<td class="DZ">06/07/2016</td> 
<td class="DZ">06/07/2016</td> 
<td class="DZ">06/07/2016</td> 
<td style="text-align:center">OK</td> 
<td>ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</td> 
<td style="text-align:center">07/07/2016</td> 
<td style="text-align:center">2</td> 
</tr> 

CSS:

.content { 
position: static; 
} 

.header { 
text-align: center; 
position: relative; 
margin-top: 40px; 
} 


th, td{ 
border:1px solid black; 
overflow: hidden; 
} 

th{ 
background-color: #eff0f0; 
} 

td{ 
background-color: #eed6b1; 
height: 50px; 
} 
table{ 
table-layout: fixed; 
min-width: 2000px; 
border-collapse: collapse; 
width: 100%; 
margin-left: 5px; 
} 

.DZ { 
text-align: center; 
} 


td:hover{ 
background-color: #b0b0b0; 
} 

Answer 1

Versuchen Sie, die Hintergrundfarbe des td ändert, wenn die Reihe schwebte wird.

tr:hover td { 
    background: #b0b0b0; 
} 

https://jsfiddle.net/j0aj1p80/