Javascript 如何在鼠标上方的其他内容上方放大div以减少滚动溢出内容的需要?Am使用角度2/4

Javascript 如何在鼠标上方的其他内容上方放大div以减少滚动溢出内容的需要?Am使用角度2/4,javascript,css,angular,animation,Javascript,Css,Angular,Animation,我有9个盒子。每个框都包含不适合框本身的数据(在我的示例中使用了一些反复出现的文本)。当我将鼠标移到任何框的顶部时,我希望该框“放大并能够与其他框重叠”,这样我就可以在不必滚动的情况下查看更多信息。动画是一个加号。实现这一目标的好方法是什么?这是指令还是别的什么?下面是我的普通html/css代码 我之前看到的图片: 鼠标悬停以设置动画后的结果图片。请注意,未显示的是框更大(由于尺寸更大),它显示更多的文本内容,这可能有助于消除滚动: html,正文{ 宽度:100%; 身高:100%;

我有9个盒子。每个框都包含不适合框本身的数据(在我的示例中使用了一些反复出现的文本)。当我将鼠标移到任何框的顶部时,我希望该框“放大并能够与其他框重叠”,这样我就可以在不必滚动的情况下查看更多信息。动画是一个加号。实现这一目标的好方法是什么?这是指令还是别的什么?下面是我的普通html/css代码

我之前看到的图片:

鼠标悬停以设置动画后的结果图片。请注意,未显示的是框更大(由于尺寸更大),它显示更多的文本内容,这可能有助于消除滚动:

html,正文{
宽度:100%;
身高:100%;
}
桌子{
边界:1;
宽度:100%;
身高:100%;
}
运输署{
文本对齐:居中;
背景:红色;
填充:10px0;
}
.卷轴{
溢出y:自动;
身高:100%;
背景:黄色;
}
.标题{
高度:20px;
}

框1
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
框2 一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
框2 一些文本
一些文本
一些文本
一些文本
一些文本
方框4 一些文本
一些文本
一些文本
一些文本
一些文本
方框5 一些文本
一些文本
一些文本
一些文本
一些文本
方框6 一些文本
一些文本
一些文本
一些文本
一些文本
框7 一些文本
一些文本
一些文本
一些文本
一些文本
方框8 一些文本
一些文本
一些文本
一些文本
一些文本
框9 一些文本
一些文本
一些文本
一些文本
一些文本

我在单元格和标题/框之间添加了一个额外的包装器,使其仅适用于CSS(可以不使用CSS,但如何处理缩放、转换等会变得更加复杂)

因为放大时,它会覆盖最接近自身的单元格,所以我在转换上添加了一个延迟,这样就有时间将光标重新定位到所选框上。另一个选择是缩小一点,但我试过了,它看起来不太好,所以我选择了延迟版本

这是你可以用的东西吗

html,正文{
宽度:100%;
身高:100%;
保证金:0;
}
* {
位置:相对位置;
框大小:边框框;
}
桌子{
边界:1;
宽度:100%;
身高:100%;
}
tr{
身高:33.333%
}
运输署{
位置:相对位置;
文本对齐:居中;
背景:红色;
填充:10px0;
身高:33.333%
}
td>div{
位置:绝对位置;
左:0;上:0;
宽度:100%;高度:100%;
背景:红色;
}
.卷轴{
溢出y:自动;
高度:计算(100%-20px);
背景:黄色;
}
.标题{
显示:块;
高度:20px;
}
tr:N个孩子(1)td:N个孩子(1)>div{
变换原点:左上;
}
tr:N个孩子(1)td:N个孩子(2)>div{
变换原点:中心-顶部;
}
tr:N个孩子(1)td:N个孩子(3)>div{
变换原点:右上角;
}
tr:N个孩子(2)td:N个孩子(1)>div{
变换原点:左中心;
}
tr:N个孩子(2)td:N个孩子(2)>div{
变换原点:中心;
}
tr:N个孩子(2)td:N个孩子(3)>div{
变换原点:右中心;
}
tr:N个孩子(3)td:N个孩子(1)>div{
变换原点:左下角;
}
tr:N个孩子(3)td:N个孩子(2)>div{
变换原点:中心-底部;
}
tr:N个孩子(3)td:N个孩子(3)>div{
变换原点:右下角;
}
td:悬停{
z指数:1;
}
td>div{
转变:转变;
}
td:hover>div{
变换:尺度(2);
转变:转变。5s。5s;
}
td:悬停>分区*{
变换:比例(0.5);
变换原点:左上;
宽度:200%;
}
td:悬停>俯仰跨度{
高度:10px;
}
td:悬停>div div{
高度:计算(200%-10px);
}

框1
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
框2 一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
框3 一些文本
一些文本
一些文本
一些文本
一些文本
方框4 一些文本
一些文本
一些文本
一些文本
一些文本
方框5 一些文本
一些文本
一些文本
一些文本
一些文本
方框6 一些文本
一些文本
一些文本
一些文本
一些文本
框7 一些文本
一些文本
一些文本
一些文本
一些文本
方框8 一些文本
一些文本
一些文本
一些文本
一些文本
框9 一些文本
一些文本
一些文本
一些文本
一些文本

这非常好。有没有一种方法可以使文本在