Twitter Bootstrap 3 apply hover only on table cells

Question

Using bootstrap to style my table. Is there a way of modifying the table-hover class so that it only highlights the mouseovered cell and not the entire row? I tried some work-arounds with jquery:

 $('.date').hover(
            function () {
                $(this).addClass('active'); },
            function () {
                $(this).removeClass('active');
            });

This successfully adds/removes the 'active' class to the cell but it doesn't change the colour of it. When I inspected the element, the cell was picking up the default background colour that is set when the table is painted and the bootstrap 'active' property was crossed out (see pic).

The reason why I am using this approach is because I do not initially know what the current cell colour is (the cells pick up a different colour depending on a condition when the table is painted) so I can't know what colour to specify for the mouse-out function.

Answer 1

Looking at the dev tools, bootstrap adds this property when hovering over a tr element:

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th{
    background-color: #f5f5f5;
}

What you need to do is:

1. Reset the bootstrap style in order to remove the hover effect.
2. Create your own rule on hover on the td element and not the tr.

In finale, your need to add the following rules:

// add your own style on td:hover
.table-hover>tbody>tr>td:hover, .table-hover>tbody>tr>td:hover{
        background-color: #f5f5f5!important; // Or any colour you like
    }

// reset the default bootstrap style on tr:hover
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th{
        background-color: inherit;
    }

---

Note: The !important part is here to be sure to override the original rule.

FIDDLE

Edit If you want to keep the original hover and add another one on the actual cell, just add the first rule in the previous answer. See the alternative fiddle.