Jquery 展开行悬停上的第TH个元素

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

这是一把小提琴在演奏：

控制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中工作，以便在将单元格悬停在表上时应用它

下面是我要做的。在您希望内容展开的th中，我将添加一个子层，其中包含我希望显示的内容，如下所示：

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

我在这里做的是删除mouseover上的“hidden”类，并将其添加到mouseout上

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

---

希望这有帮助。

这里可能也包括相关的HTML？您的小提琴不会尝试应用

应用的css

类。你能提供一份详细的报告吗？你能确切地说明你的哪个部件有问题吗？根据您提供的内容，您似乎可以非常轻松地将

。applied css

应用到正确的位置。是css还是jquery？使用jquery（与上面类似），我在针对高亮显示的row/col-TD元素，然后将CSS应用到对应的TH元素时遇到问题。我将制作更多的提琴来展示我的尝试。

$（this.nestest（'table'）.find（“tr:first”）.find（“th”）.eq（$（this.index（））

（参见前面的提琴）OP希望扩展列的相关标题，而不是单元格本身，尽管它非常相似，只是目标稍有不同。这是为我做的。非常感谢您的回复！

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