javascript - JavaScript (w/jQuery) - 当被其他元素包围时，在悬停时增长一个元素以填充容器

Question

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

但是我的下一步是在悬停时增加所述元素以填充其容器，我假设我需要获取当前的 (x,y) 值，然后将其增长到父容器的 (x,y) 值和使用css定位，但是我采取的每一种方法都是碰壁。我在这里有一个小提琴，它演示了布局/预期的功能 - http://jsfiddle.net/u2w7J/

任何帮助将不胜感激！

Answer 1

目前你的 HTML 设置方式，虽然看起来很流畅，但有点难以完成。第一次尝试是使用 .toggleClass 函数并为悬停的元素切换“box”和“miniBox”。有关演示，请参见http://jsfiddle.net/u2w7J/6/ 。

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

我建议绝对定位迷你盒子。悬停时，获取父级 div left 和 top 值并使用这些值为 miniBox 设置动画。此外，在动画期间或之前提高 z-index 以防止其他 miniBoxes 可见。