悬停时无法使表行更改颜色

时间:2016-08-08 01:37:15

标签: html css hover row css-tables

我在悬停换色器上制作了表格数据,但是我想在悬停时为整个表格行更改它,但是当我将td:hover更改为tr:hover时它不起作用。我究竟做错了什么?

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;
}

1 个答案:

答案 0 :(得分:3)

尝试在行悬停时更改td的背景颜色。

tr:hover td {
    background: #b0b0b0;
}

https://jsfiddle.net/j0aj1p80/