Javascript CSS:避免在表中向下移动光标时跳过一行

Javascript CSS:避免在表中向下移动光标时跳过一行,javascript,html,css,Javascript,Html,Css,当单元格隐藏溢出并在悬停时显示它时,如果: a) 您正在将鼠标光标向下移动到下行 及 b) 当前单元格和将要移动单元格的溢出高度之差大于当前单元格的总溢出高度 您将至少跳过一行 Html: 转到名为“TEST”的列,并尝试将光标从第1行的单元格移动到“TEST”列第2行的单元格 建议避免这种行为,同时不牺牲在悬停状态下显示所有内容的单行行的想法。我创建了一个。 我所做的主要改变是添加了位置:绝对 .superResponsive td:hover .content{ backgroun

当单元格隐藏溢出并在悬停时显示它时,如果:

a) 您正在将鼠标光标向下移动到下行

b) 当前单元格和将要移动单元格的溢出高度之差大于当前单元格的总溢出高度

您将至少跳过一行

Html:

转到名为“TEST”的列,并尝试将光标从第1行的单元格移动到“TEST”列第2行的单元格

建议避免这种行为,同时不牺牲在悬停状态下显示所有内容的单行行的想法。

我创建了一个。 我所做的主要改变是添加了
位置:绝对

.superResponsive td:hover .content{
    background: black none repeat scroll 0 0;
    color: yellow;
    height: auto;
    overflow: visible;
    position: absolute;
    z-index: 4;
}

它并不完美,但比你拥有的要好。

请评论为什么投票反对,这样我可以改进我的问题。这个小细节是我的一个表格中的一个巨大缺陷,确实是一个需要解决的挑战,因为试图通过将随机文本格式化为代码而不是提供有问题的代码来欺骗系统,这将吸引选民。我的小提琴示例中提供的代码正是我要处理的问题!这是怎么欺骗系统的,我不知道你为什么说用小提琴复制这个问题是件坏事,现在我明白了。仍然不理解在提供fiddle时复制代码的必要性。P.S.没有注意到“链接到JSFIDLE…”消息,谢谢你指出,不会欺骗你again@AlExTsm我们不会复制到期的代码,这样即使JSFIDLE发生故障,您的问题也会出现在这里,而且这会让通过回答您的问题来帮助您的人更轻松。谢谢,我也尝试过同样的方法,但不知道在滚动表格时如何绕过内容的偏移量。不知道如何使内容在滚动X或YY时保持与父单元格的连接您的解决方案,但位置:绝对是完美的!thanks@AlExTsm我将编辑答案,很高兴它有帮助:)。如果答案适合您的需要,请将其标记为正确。
    .superResponsive{
  width:100%;
    border-collapse:collapse;
}

.superResponsive td, .superResponsive th{

   width:200px;


   min-height:30px;
   height:30px;
   min-height:30px;

   border:1px solid black;
   vertical-align: top;

}

.content{
   overflow: hidden;
  width:200px;

   min-height:30px;
   height:30px;
   min-height:30px;

}

.superResponsive td:hover .content{
    background:lightGrey;

    overflow: visible;
    height:auto;
    color:yellow;


}
.superResponsive td:hover .content{
    background: black none repeat scroll 0 0;
    color: yellow;
    height: auto;
    overflow: visible;
    position: absolute;
    z-index: 4;
}