是否可以在CSS中使用：height：height + 50px？

Question

我需要在height上增加div +50px的{​​{1}}（未定义先验）。

:hover

.foo{
  background: red;
  width: 50%;
  text-align: center;
}
.foo:hover{
  height: height+50px;
  color: white;
}

• 只能使用<div class="foo">foo text</div>吗？
• 是否可以使用css？

PS。

实用（更复杂）需要：我有一个“精灵”图像

less

其中H是相应初始图像的悬停图像
我可以为每个类（1,2,3）计算X和Y坐标，但对于1234 HHHH 5678 HHHH ，我想用imageheight来计算：

:hover

Answer 1

也许您可以考虑使用伪元素：

http://jsfiddle.net/pjr7wbhk/2/

.foo{
  background: red;
  width: 50%;
  text-align: center;
}

.foo:hover{
  color: white;
}

.foo:hover::after {
    content: '';
    display: block;
    height: 50px;
}

Answer 2

根据我的评论：我建议另一种方法。只需将box-shadow设置为容器元素，如下所示：

＆＃13;

＆＃13;

a {
  text-indent: -9999px;
  overflow: hidden;
  background: url('http://nationalevents.cityofhope.org/images/content/pagebuilder/facebook-icon.png');
  background-size: cover;
  width: 32px;
  height: 32px;
  display: block;
  /*border: 1px solid white;*/
  box-sizing: border-box;
  border-radius: 50%;
}
a:hover {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

＆＃13;

<a href="#">Some text</a>

＆＃13;

＆＃13;

＆＃13;

请注意，box-sizing和border-radius设置在a上，而不是悬停上。这样做是为了防止悬停时的任何额外处理时间。最好保持最小化的悬停变化。

Answer 3

如果您的身高变量如下：

@foo-height : 50px; /* here goes your initial height value */

您可以在.less文件中编写这些规则：

.foo {
    background: red;
    width: 50%;
    height: @foo-height;
    text-align: center;
}
.foo:hover {
    height: ~'calc(@{foo-height} + 50px)';
    color: white;
}

Answer 4

使用额外的html元素和一些abs / rel定位：

http://jsfiddle.net/pjr7wbhk/6/

<div class="foo">
    <div class="inner-helper">foo text</div>
</div>

CSS：

.foo {
    position: relative;
}
.foo .inner-helper {
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
}
.foo:hover .inner-helper {
    bottom: -50px;
}