如何在悬停在 table 行时覆盖 CSS 样式?
How to override CSS style during hover in a table row?
我在这个论坛上看到了几个与我的问题相关的问题,但都没有帮助,所以我在这里发帖。
我有一个 table,其中样式应用于 table 级别 (.tblSignal) 和 td 级别 (.tdSignalName)。这是 jsfiddler link
我的问题是,当我将鼠标悬停在 table 上时,所有文本都应该变成白色。但是由于在 .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">
<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>
当父项悬停时,您还需要覆盖 .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>
我在这个论坛上看到了几个与我的问题相关的问题,但都没有帮助,所以我在这里发帖。
我有一个 table,其中样式应用于 table 级别 (.tblSignal) 和 td 级别 (.tdSignalName)。这是 jsfiddler link
我的问题是,当我将鼠标悬停在 table 上时,所有文本都应该变成白色。但是由于在 .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">
<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>
当父项悬停时,您还需要覆盖 .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>