Javascript CSS：悬停以强制元素偏移跨浏览器解决方案

我有一个相当有趣的问题，我想知道是否可以用CSS来完成。我知道你可以使用webkitmoz转换，或者javascript，但是还有其他简单的CSS跨浏览器解决方案吗

我有一个盒子，上面有一个类容器

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

现在我要做的是在鼠标上方（CSS悬停）将框放大到30px乘以30px，在10x10框大约中心的某个位置，当我鼠标移出时返回到原始容器。大致如下：

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

现在的困难在于

top

和

Left

位置被设置到从数据库发送的HTML中，因此不会出现在CSS文件中

我可以选择从DB数据动态生成CSS文件，并有效地为每个对象创建一个类（我真的认为这是个坏主意），或者使用Javascript管理一些计算

onmouseover

和

onmouseout

，但这让我觉得不是很优雅。这就是我现在正在做的。嗯

---

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

我认为Javascript是最优雅的解决方案

客户端脚本的目的是进行客户端交互，这正是您要做的

---

这本身并不是对您的问题“是否有更好的CSS解决方案”的回答，但我认为Javascript是更好的解决方案。CSS解决方案充其量只是黑客攻击，可能无法工作。

您可以使用

覆盖
HTML
发送的
顶部
和
左侧
样式！重要信息

在

样式表中

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

如何将
.container
包装到父元素中，该父元素使用数据库中的
left
和
top
值定位

考虑到该标记，您不需要为
：悬停
对
.container
的影响明确知道
左
和
顶
，因此您可以使用固定值，因为它们将根据
.container
的偏移父项的
左
和
顶
确定

例如，给定此标记：

<div class="container-parent">
    <div class="container">
        ...   
    </div>
</div>

在这里，
.container
与数据库中的
左侧
和
顶部
坐标类似，但在
上：悬停
将自身移动-15px到
左侧
和
顶部
。由于它位于一个定位的父对象内，这些新的
左
和
顶
值将等于原始值-15px

这就是你想要做的吗？
如果它只是顶部/左侧，那么你可以忽略它们，并使用边距来移动它们（前提是你知道尺寸）

演示


重要的计算是，余量需要与悬停时尺寸增加的一半相匹配

所以，30像素的最终大小减去10像素的初始大小是20像素。您需要偏移（使用边距）20/2=10像素。
我给出的示例是为了说明我希望发生的事情的效果。事实上，我不想让每一个class
container
的元素在鼠标经过时都跳转到top:90 left:90的位置！很公平！但是您可以为
div
指定一个特定的
ID
或
类（如果有一些），然后使用
！重要信息
。关于javascript与客户端manips的关系，您当然是对的。我不确定我是否同意CSS“充其量只是黑客行为”，因此webkit和moz的努力，也可能是CSSGreat未来的做法，它不需要任何额外的标记，就像我塞进我的帖子一样。这就是路，很好。谢谢。顺便说一句，这就是我选择这些维度的原因；-）
.container-parent{
    left:224px; /* from DB */
    position: absolute;
    top:128px; /* from DB */
}

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

.container:hover
{
 width: 30px;
 height: 30px;
 top: -15px; /* new width / 2 to center box */
 left:-15px; /* new height / 2 to keep things centered */
}

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