Как переопределить стиль CSS во время зависания в строке таблицы?

Question

Я видел несколько вопросов на этом форуме, связанных с моей проблемой, но ни один из них не был полезен, поэтому размещаю здесь.

У меня есть таблица, где стиль применяется на уровне таблицы (.tblSignal) и уровне td (.tdSignalName). Вот jsfiddler link

Моя проблема в том, что когда я наводил на стол, весь текст должен быть белого цвета. Но так как стиль применяется к .tdSignalName как «# 0072c6», он не отменяет цвет до белого. Я попробовал «! Важно», но это не сработало. Пожалуйста, порекомендуйте !

.tblSignal{ 
 
/* border-width:1px; */ 
 
border-style:solid; 
 
} 
 
.tblSignal:hover{ 
 
background-color:#0072c6; 
 
color:#FFFFFF !important; 
 
font-size:initial; 
 
} 
 
.tdSignalName{ 
 
font-weight:bold; 
 
height:30px; 
 
font-size:16px; 
 
color:#0072c6; 
 
} 
 
/* .tdSignalName:hover{ 
 
color:#FFFFFF !important; 
 
} */ 
 

 
.tdSignalDescription{ 
 

 
} 
 
.tdSigButton{ 
 
text-align:center; 
 
vertical-align:middle; 
 
}

<table class="tblSignal" width="500px"> 
 
<tr > 
 
<td class="tdSignalName" width="400px"> \t \t \t \t \t \t 
 
\t <div>Title</div> 
 
</td> 
 

 
<td rowspan="2" class="tdSigButton" width="100px"> 
 
\t <div id="divButton"> \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t <button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button> 
 
\t </div> 
 
</td> 
 
</tr> \t 
 
<tr> 
 
<td class="tdSignalDescription" width="400px"> 
 
\t <!-- _#=ctx.RenderBody(ctx)=#_     --> 
 
\t <div><i>SignalDescription </i></div> 
 
</td> \t \t \t \t \t 
 

 
</tr> \t \t 
 
\t \t \t \t \t 
 
</table>

Answer 1

Вы должны также переопределить декларацию .tdSignalName цвета, когда родитель парил ...

.tblSignal:hover .tdSignalName { 
    color:#FFFFFF; 
} 

Пример ...

.tblSignal { 
 
    border-style: solid; 
 
} 
 
.tblSignal:hover { 
 
    background-color: #0072c6; 
 
    color: #FFFFFF !important; 
 
    font-size: initial; 
 
} 
 
.tdSignalName { 
 
    font-weight: bold; 
 
    height: 30px; 
 
    font-size: 16px; 
 
    color: #0072c6; 
 
} 
 
.tblSignal:hover .tdSignalName { 
 
    color: #FFFFFF; 
 
} 
 

 
.tdSigButton { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<table class="tblSignal" width="500px"> 
 
<tr> 
 
    <td class="tdSignalName" width="400px"> 
 
     <div>Title</div> 
 
    </td> 
 
    <td rowspan="2" class="tdSigButton" width="100px"> 
 
     <div id="divButton"> \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button> 
 
     </div> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td class="tdSignalDescription" width="400px"> 
 
     <!-- _#=ctx.RenderBody(ctx)=#_     --> 
 
     <div><i>SignalDescription </i></div> 
 
    </td> 
 
</tr> 
 
</table>