javascript - CSS :hover to force element offset cross-browser solution needed

Question

我有一个相当有趣的问题，想知道它是否可以纯粹用 CSS 来完成。我知道您可以使用 webkit moz 转换或 javascript，但是是否有另一种简单的 CSS 跨浏览器解决方案？

我有一个带有类容器的盒子 say

.container
{
 position: absolute;
 border: black 1px solid;
 top: 100px;
 left:100px;
 width: 10px;
 height: 10px;
}

现在我想做的是在鼠标悬停(CSS 悬停)时围绕 10x10 框的近似中心某处的中心点将框放大到 30px x 30px，当我将鼠标移出时返回到原始容器。类似的东西:

.container:hover
{
 width: 30px;
 height: 30px;
 top: 90px;
 left:90px;
}

现在的困难在于 top 和 Left 位置被设置到从数据库发送的 HTML 中，因此不会出现在 CSS 文件中。

选项是我从数据库数据动态生成 CSS 文件，并有效地为每个对象创建一个类(我真的认为这是一个坏主意)或者我使用 Javascript 来管理一些计算 onmouseover 和 onmouseout 但这让我觉得不是很优雅。这就是我现在正在做的。哎呀。

伙计们，有更好的 CSS 解决方案吗？

Answer 1

如果它只是顶部/左侧，那么您可以忽略它们并使用边距移动它们(前提是您知道尺寸)

.container:hover
{
 width: 30px;
 height: 30px;
 margin-left:-10px;
 margin-top:-10px;
}

演示 http://jsfiddle.net/gaby/CuuNW/

---

重要的计算是边距需要匹配悬停时发生的大小增加的一半。

所以，30 像素的最终大小减去 10 像素的初始大小是 20 像素。您需要偏移(使用边距)20/2 = 10 像素。