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

Question

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

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

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

现在我想做的是在鼠标悬停（CSS悬停）时将盒子放大到 30px x 30px 围绕 10x10 盒子大约中心的某个中心点，当返回到原始容器时我把鼠标移开。大致如下：

.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 像素。

Answer 2

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

客户端脚本的目的是用于客户端交互，这正是您想要做的。

这本身并不是您问题“是否有更好的 CSS 解决方案”的答案，但我认为 Javascript是更好的解决方案 >。 CSS 解决方案充其量只是很笨拙，而且可能行不通。

Answer 3

您可以通过在 中使用 !important 来覆盖随 HTML 发送的 top 和 left 样式样式表。

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

Answer 4

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

有了这个标记，您就不需要明确知道 left 和 top 来实现 .container:hover 效果code>，因此您可以使用固定值，因为它们将根据 .container 的偏移父级的 left 和 top 确定。

例如，给定此标记：

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

您需要使用 top 和 left 数据库值来定位 .container-parent。从那里，您的 CSS 将如下所示：

.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 看起来就像通常在数据库的 left 和 top 坐标处一样，但是:hover 将自身向左侧和顶部移动-15px。由于它位于定位父级内部，因此这些新的 left 和 top 值将等于您的原始值 - 15px。

这就是你想做的事吗？