问题描述
||
我有一个相当有趣的问题,想知道是否可以完全在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解决方案?
解决方法
如果只是顶部/左侧,则可以忽略它们,并使用边距在周围移动(前提是您知道尺寸)
.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。
这就是您要做什么?