CSS:悬停以强制元素偏移所需的跨浏览器解决方案

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

本文关键字：解决方案 浏览器 悬停 元素 CSS      更新时间：2023-09-26

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

我有一个盒子，里面有一个班级集装箱，上面写着

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

现在我想做的是在鼠标悬停（CSS悬停）上，在10x10框的大致中心的某个中心点周围将框放大到30px乘30px，当我鼠标悬停时返回到原始容器。大致如下：

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

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

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

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

如果它只是左上角，那么您可以忽略它们，并使用边距将它们四处移动（前提是您知道尺寸）

.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;
}

将.container封装在数据库中具有left和top值的父元素中如何？

考虑到该标记，对于:hover对.container的影响，您不需要明确地知道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坐标上的显示方式与通常一样，但在:hover上，它将自身移动-15px到left和top。由于它位于定位的父级中，因此这些新的left和top值将等于您的原始值-15px。

这就是你想要做的吗？

相关文章：