如何在鼠标悬停时高亮Bootstrap-Table当前列/表头？

要实现鼠标悬停表格单元格时，对应列的表头变色（而非整列高亮），可以通过自定义CSS样式 + 监听鼠标事件动态切换样式类来完成，具体步骤如下：

1. 定义高亮样式 #

先添加自定义的CSS类，用来标记高亮状态的表头：

/* 自定义列头高亮样式，可根据需求调整颜色 */
.header-highlight {
  background-color: #f0f5ff !important;
  color: #2d6aed !important;
}

这里的!important是为了覆盖Bootstrap-Table默认的表头样式，确保高亮效果能正常显示。

2. 绑定鼠标事件 #

利用jQuery（Bootstrap-Table依赖jQuery）监听表格单元格的鼠标进入/离开事件，找到对应列的表头并切换样式类：

$(function() {
  // 鼠标进入单元格时，高亮对应列的表头
  $('.bootstrap-table tbody').on('mouseenter', 'td', function() {
    const colIndex = $(this).index();
    $('.bootstrap-table thead th').eq(colIndex).addClass('header-highlight');
  });

  // 鼠标离开单元格时，移除所有表头的高亮样式
  $('.bootstrap-table tbody').on('mouseleave', 'td', function() {
    $('.bootstrap-table thead th').removeClass('header-highlight');
  });
});

特殊情况处理 #

如果你的表格使用了**固定列（Fixed Columns）**功能，需要调整表头的选择器，比如针对固定表头的元素，选择器改为.fixed-table-header th，确保固定列的表头也能触发高亮。

内容的提问来源于stack exchange，提问作者Leszek Pachura