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

JavaScript (w/jQuery) - grow an element to fill container on hover, when surrounded by other elements

本文关键字：元素 一个 填充 悬停 jQuery 其他 JavaScript 包围      更新时间：2023-09-26

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

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

任何帮助将不胜感激！

以目前 HTML 的设置方式，这在让它看起来很流畅的同时很难完成。第一次尝试是使用 .toggleClass 函数并为悬停的元素切换"box"和"miniBox"。有关演示，请参阅 http://jsfiddle.net/u2w7J/6/。

定位

更难，因为迷你盒子不是绝对定位的。因此，添加动画会导致奇怪的结果（见上面的演示）。

我建议将迷你盒子绝对放置。悬停时，获取父项div 左值和顶部值，并使用这些值对 miniBox 进行动画处理。此外，在动画期间或之前提高 z 索引，以防止其他迷你框可见。

相关文章：