CSS: height: height+50px 可以吗？

Question

我需要在[=17=上增加div +50px的height（未定义先验） ].

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

<div class="foo">foo text</div>

只有 css 可以吗？
是否可以使用 less？

PS.

实际（更复杂）需要：我有一张"sprite"图片

1234
HHHH
5678
HHHH

其中 H 是相应初始图像的悬停图像。

我可以计算每个 class (1,2,3) 的 X 和 Y 坐标，但是对于 :hover 我只想使用 imageheight:

:hover {background-position-y: background-position-y - @imgheight}

Answer 1

如果你有这样的身高变量：

@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 2

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

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 3

使用额外的 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;
}

Answer 4

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

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

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

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

CSS: height: height+50px 可以吗？

Is it possible in CSS: height: height+50px?

html

css

less