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

|| 我有一个相当有趣的问题，想知道是否可以完全在CSS中完成。我知道您可以使用webkit moz转换或javascript，但是是否还有另一个简单的CSS跨浏览器解决方案呢？我有一个带类容器的盒子说

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

现在，我要在mouseover（CSS悬停）上执行的操作是，将框扩大到30px x 30px，围绕10x10框的近似中心处的某个中心点，当我将鼠标移出时，返回到原始容器。类似于以下内容：

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

现在的困难在于，将top和Left位置设置为从数据库发送的HTML中，因此它们不会出现在CSS文件中。选项是我从数据库数据动态生成CSS文件，并为每个对象有效地创建一个类（我真的认为这是一个坏主意），或者我使用Javascript管理某些计算onmouseover和onmouseout，但这使我感到震惊不是很优雅。这就是我现在正在做的。 eu 那么，伙计们，有没有更好的CSS解决方案？

已邀请:

4 个回复

澳绍能

如果只是顶部/左侧，则可以忽略它们，并使用边距在周围移动（前提是您知道尺寸）

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

演示http://jsfiddle.net/gaby/CuuNW/ 重要的计算是，边距需要与悬停时出现的尺寸增加的一半相匹配。因此，30像素的最终尺寸减去10像素的初始尺寸即为20像素。您需要偏移（使用边距）20/2 = 10像素。

蓟类

我认为Javascript是最优雅的解决方案。客户端脚本的目的是为了进行客户端交互，这正是您正在尝试执行的操作。本质上，这不是您的问题“是否有更好的CSS解决方案”的答案，但是我认为Javascript是更好的解决方案。 CSS解决方案充其量可能是骇人听闻的，而且可能行不通。

厘恼轨

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

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

泻伴墓荒

如何将ѭ13包裹在数据库中带有left和top值的父元素中？有了该标记，您就不必对.container上的:hover效果明确知道left和top，因此您可以使用固定值，因为它们将基于.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坐标处一样，但是在ѭ18on上将自身偏移-15px到left和top。由于它位于已定位的父级中，因此这些新的left和top值将等于您的原始值-15px。这就是您要做什么？

要回复问题请先登录或注册

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

4 个回复

发起人

css3

cross_browser

css

offset

javascript

问题状态

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

与内容相关的链接

4 个回复

发起人

css3

cross_browser

css

offset

javascript

问题状态