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

Question

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

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

这成功地向单元格添加/删除了“事件”类，但它并没有改变它的颜色。当我检查该元素时，该单元格正在选择绘制表格时设置的默认背景颜色，并且划掉了 Bootstrap 的“事件”属性(参见图片)。

我使用这种方法的原因是因为我最初不知道当前单元格的颜色是什么(单元格根据绘制表格时的条件选择不同的颜色)所以我不知道什么颜色指定鼠标移出功能。

Answer 1

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

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

你需要做的是:

1. 重置引导样式以移除悬停效果。
2. 在 td 元素上创建您自己的 hover 规则，而不是 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 .