Twitter Bootstrap 3仅在表格单元格上应用悬停

Question

使用bootstrap来设置我的表格样式。有没有办法修改表悬停类，以便它只突出显示鼠标悬停的单元格而不是整个行？我尝试了一些使用jquery的解决方法：

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

这会成功添加/删除“有效”状态＆＃39;类到单元格，但它不会改变它的颜色。当我检查元素时，单元格正在拾取默认的背景颜色，该颜色是在绘制表格时设置的，并且引导程序处于活动状态＆＃39;财产被划掉了（见图）。

我使用这种方法的原因是因为我最初并不知道当前的细胞颜色是什么（细胞根据绘制的桌子时的条件选择不同的颜色）所以我不能知道为鼠标输出功能指定的颜色。

Answer 1

查看开发工具，当鼠标悬停在tr元素上时，bootstrap会添加此属性：

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

您需要做的是：

1. 重置引导程序样式以删除hover效果。
2. 在hover元素的td上创建自己的规则，而不是tr。

在结局中，您需要添加以下规则：

// 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;
    }

---

注意：此处!important部分一定要覆盖原始规则。

FIDDLE

修改如果您想保留原始悬停并在实际单元格上添加另一个悬停，只需在上一个答案中添加第一条规则即可。请参阅alternative fiddle。