I have a Django project where I am working on customizing the background color of priority cells in a table based on their status (high, medium, low). My table is styled using Bootstrap, which includes the table-hover class. However, when I hover over a row, the background color of the priority cells changes to the default hover color of the table instead of maintaining the custom colors I have set.
Below is the relevant HTML code:
<table class="table table-dark table-sortable table-hover">
<thead>
<tr>
<th scope="col">Priority</th>
</tr>
</thead>
<tbody id="table-body" class="table-body">
<tr class="task-row">
<td class="{% if task.priority == 'high' %}high-priority{% elif task.priority == 'medium' %}medium-priority{% else %}low-priority{% endif %}">
{{ task.get_priority_display }}
</td>
</tr>
</tbody>
</table>
And here is the CSS being used:
.table .high-priority {
background-color: hsl(5, 39%, 30%) !important;
}
.table .medium-priority {
background-color: hsl(27, 64%, 40%) !important;
}
.table .low-priority {
background-color: hsl(146, 34%, 25%) !important;
}
.table .task-row:hover .high-priority,
.table .task-row:hover .medium-priority,
.table .task-row:hover .low-priority {
background-color: inherit !important;
}
Issue:
Even with these styles in place, the background color of the priority cells continues to change when hovering over the row. I want the priority cells to retain their assigned colors regardless of hover state.
Question:
How can I prevent the background color of the priority cells from changing when hovering over the row, while still utilizing the Bootstrap table-hover class?
Screenshot displaying the issue while hovering over the table.
What I’ve Tried:
• Using !important on the background colors.
• Setting background-color: inherit for hover states of priority cells.