JavaScript（w/jQuery）-当被其他元素包围时，在悬停状态下增长一个元素以填充容器

我有一个网格的元素（3 x 3）形成切换可见性悬停，很容易

然而，我的下一步是增长所述元素，以在悬停时填充其容器，我假设我需要获得当前（x，y）值，然后将其增长到父容器的（x，y）值，并使用css定位，但是我采取的每一种方法都会遇到困难。我这里有一把小提琴，它展示了布局/预期功能-

---

任何帮助都将不胜感激

按照当前HTML的设置方式，要使其看起来平滑，这是很难做到的。第一次尝试是使用.toggleClass函数并为悬停的元素切换“box”和“miniBox”。请参见演示

因为迷你们箱不是绝对定位的，所以定位比较困难。因此，添加动画会导致奇怪的结果（参见上面的演示）

---

我建议把迷你们箱放在绝对位置。悬停时，获取父div left和top值，并使用这些值设置迷你箱的动画。此外，在动画期间或之前提高z索引，以防止其他迷你框可见。

为此，我可能会重构html并完全按照您的建议放置，我还考虑克隆当前元素，然后使其移动到中心并从中心增长，这可能是一个“更容易”的选项。