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

希望这会有所帮助。

在行悬停时展开TH元素

1 个答案: