I currently have a table structured as follows:
<table class="cedvel">
<caption>
count:
<%:Html.Encode(TempData["RowsCount"])%></caption>
<thead>
<tr>
<th id="thAfield1" class="field1,asc">
<span>field1</span><span id="spanAfield1" class="spanAscDesc">↑↓</span>
</th>
<th id="thfild2" class="field2,asc">
<span>field2</span> <span id="spanfield2" class="spanAscDesc">↑↓</span>
</th>
................................
</thead>
<tbody>
<%if (Model.<----->.Count() > 0)
{
foreach (var abonent in Model.<---->)
{%>
<tr>
<td>
data
</td>
<td>
data
</td>
................................
</tr>
<tr class="noData">
<td colspan="11">
no info
</td>
</tr>
<% }%>
</tbody>
</table>
My goal is to change the background color when hovering over th elements. I attempted to do so with CSS but was unable to achieve the desired effect. However, changing the background color on hover for tr elements worked perfectly.
table.cedvel th {
background-color: #c3dde0;
background-image: url(../Content/SiteImages/1.png);
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.cedvel th:hover {
background-color: Red;
}
My issue arose when attempting to set background-image to none during hover. The problem was that while the background color changed successfully, my image remained hidden.