I am working with a table that has rows marked with flags.
Below is the CSS I have used:
<table class="hovered no-border" data-url="@Url.Action("General", "Transport")">
<tbody>
<tr>
<td><input type="checkbox" value="0"/></td>
<td>TNB.12/00125</td>
<td><i class="icon-flag-3 fg-color-grayLight"></i> Blah blah blah</td>
</tr>
<tr>
<td><input type="checkbox" value="0"/></td>
<td>TNB.12/00128</td>
<td><i class="icon-flag-3 fg-color-grayLight"></i> Blah blah blah</td>
</tr>
<tr>
<td><input type="checkbox" value="0"/></td>
<td>TNB.12/00129</td>
<td><i class="icon-flag-3 fg-color-grayLight"></i> Blah blah blah</td>
</tr>
<tr>
<td><input type="checkbox" value="0"/></td>
<td>TNB.12/00119</td>
<td><i class="icon-flag-3 fg-color-yellow"></i> Blah blah blah</td>
</tr>
</tbody>
</table>
table.hovered tbody tr:hover {
background-color: #ececec;
}
table.hovered tbody tr td:hover i {
color: #9a9a9a !important;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'iconFont';
font-style: normal;
speak: none;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
margin: 0 2px;
-webkit-font-smoothing: antialiased;
border: 1px transparent solid;
}
.icon-flag-3:before {
content: "\e14f";
}
One of the lines, specifically #119, is emphasized with a yellow flag.
The Issue: I do not want the color of the yellow flag to change when the row is hovered over. How can I prevent this?
Thank you.