在行悬停时展开 TH 元素

Question

我有一个表格，当单元格悬停时突出显示行和列。

这是实际操作中的一个小技巧： https://jsfiddle.net/cbsuwz5y/4/

控制dom的jquery在这里：

$("table").on('mouseover mousedown mouseleave', 'td', function (e) {
                    if (e.type == 'mouseover' || e.type == 'mousedown') {
                        $(this).parent().addClass("hover");
                        $(this).closest('table').find("col").eq($(this).index()).addClass("hover");
                    } else {
                        $(this).parent().removeClass("hover");
                        $(this).closest('table').find('col').eq($(this).index()).removeClass("hover");

                    }
                });

我想要的是，当单元格悬停时，TH 元素会展开。我正在尝试通过应用这个 css 类来做到这一点：

.applied-css {
    display: block;
    position: absolute;
    top: -60px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 85px;
    height: 85px;
    background: white;
    z-index: 1;
}

并使用这行 JS：

$(this).closest('table').find("col").eq($(this).index()).find(".div-default").addClass("applied-css");

谁能指出我正确的方向来让它工作？

我应该补充一点，当我说“扩展”TH 时，我基本上是在假装扩展的样子。我使用 CSS 在 TH 上覆盖一个大于 TH 正方形的正方形。这会稍微切断它旁边的单元格，但我可以接受。当我在 CSS 中使用 :hover 悬停实际 TH 时，我可以让它工作。但是当我将一个单元格悬停在表格上时，我想让它在 jquery 中工作以应用它。

Answer 1

这就是我要做的。在您希望内容扩展的地方，我将添加一个包含我要显示的内容的子层，如下所示：

<div class="expand hidden">
    test 1
</div>

我会将您的悬停行为更新为：

$("table").on('mouseover mousedown mouseleave','td', function(e) {
  if (e.type == 'mouseover' || e.type == 'mousedown') {
  $(this).parent().addClass("hover");
  $(this).closest('table').find("col").eq($(this).index()).addClass("hover");

  $(this).closest('table').find('thead > tr > th').eq($(this).index()).children(".expand").removeClass("hidden");
 } else {
  $(this).parent().removeClass("hover");
  $(this).closest('table').find('col').eq($(this).index()).removeClass("hover");

  $(this).closest('table').find('thead > tr > th').eq($(this).index()).children(".expand").addClass("hidden");
 }
});

我在这里所做的是在鼠标悬停时删除“隐藏”类并在鼠标悬停时添加它。

css 的最后一个：

th {
  border: 1px solid #ff0000;
  position: relative;
}
.expand {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  width: 300px;
  height: 40px;
  transition: all 0.4s;
  overflow: hidden;
}
.hidden {
  width: 0;
  height: 0;
  visibility:hidden;
}

希望这会有所帮助。