Prevent Bootstrap table-hover Class from Changing Background Color of Cells in a Table

I’m working on a Django project where I have a table displaying tasks, and I need to customize the background color of priority cells based on their status (high, medium, low). I’m using Bootstrap for styling, 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 keeping the custom color I’ve set.

Here’s the relevant HTML:

<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’s the CSS I’m using:

.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:

Despite these styles, the background color of the priority cells still changes when I hover over the row. I want the priority cells to maintain their assigned colors even when the row is hovered.

Question:

How can I prevent the background color of the priority cells from changing when I hover over the row, while still using the Bootstrap table-hover class?

A screenshot showing the issue while hovering over the table.

What I’ve Tried:

•   Using !important on my background colors.
•   Setting background-color: inherit for the hover state of the priority cells.

Remove background-color: inherit !important;, that doesn't achieve what you want.

The unwanted color you are dealing with is not actually a background-color - it's a box-shadow, coming from

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

So overwrite that with box-shadow: none in your :hover rules, where you are currently trying to inherit the background-color.