Question

我在这个论坛上看到了几个与我的问题有关的问题，但这两个问题都没有帮助，所以我在这里发帖。

我有一个表，其中在表级（.tblSignal）和td级（.tdSignalName）应用了一个样式。这是jsfiddler link

我的问题是，当我将鼠标悬停在桌面上时，所有文字都会变为白色。但由于.tdSignalName上的样式应用为“＃0072c6”，因此它不会将颜色覆盖为白色。我试过“！important”，但它没有用。请指教！

.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">						
	<div>Title</div>
</td>

<td rowspan="2" class="tdSigButton" width="100px">
	<div id="divButton">						 						 
	 <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>

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">						 						 
            <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>

如何在表格行中悬停时覆盖CSS样式？

1 个答案: