Question

我更喜欢仅CSS解决方案;我可以改变HTML结构;始终只有单行文字

TL; DR;

如何隐藏文本的顶部而不是底部：

div {
  overflow: hidden;
  height: 11px;
}

<div>HOME</div>

完整示例

我想隐藏文本行的顶部，以便我可以模拟过渡效果：

div {
  height: 20px;
  width: 100px;
  text-align: center;
}
div span {
  display: block;
  overflow: hidden;
  transition: all 500ms ease-in-out;
  height: 20px;
}
div .default {
  color: black;
  background-color: #f0f0f0;
}
div .hover {
  height: 0;
  color: white;
  background-color: black;
}
div:hover .hover {
  height: 25px;
}
div:hover .default {
  height: 0px;
}

<div>
  <span class="default">HOME</span>
  <span class="hover">HOME</span>
</div>

正如您在示例.hover中看到的那样，当前正在从底部滑动，因为当高度降低时，文本会从下到上隐藏。

我想从上到下隐藏文字，这样看起来就像翻译它的颜色一样。

Answer 1

如果我使用伪元素，你反对吗？我使用bottom高度进行播放，使其从上到下显示content属性中的文字。

div .default {
  display: block;
  overflow: hidden;
  height: 20px;
  position: relative;
  color: black;
  background-color: #f0f0f0;
}
div .default:after { content: "Home"; position: absolute; left: 0; bottom: 100%; right: 0; background: #000; color: #fff; text-transform: uppercase; transition: all 500ms ease-in-out;}
div .default:hover:after { bottom: 0; }

HTML

<div>
  <span class="default">HOME</span>
</div>

Like this

保留结构并避免内容属性中的文本的其他解决方案

<div>
  <span class="default">HOME</span>
  <span class="black">HOME</span>
</div>

CSS

div .black { position: absolute; left: 0; bottom: 100%; right: 0; background: #000; color: #fff; text-transform: uppercase; transition: all 500ms ease-in-out;}
div .default:hover ~ .black { bottom: 0; }

Fiddle with 2nd solution

Answer 2

我通过在原始项目上使用绝对定位元素来解决这个问题：

div {
  height: 20px;
  width: 100px;
  text-align: center;
  position: relative;
}
div span {
  display: block;
  overflow: hidden;
  transition: all 500ms ease-in-out;
  height: 20px;
}
div .default {
  color: black;
  background-color: #f0f0f0;
  /* ADDED */
  position: absolute;
  left: 0;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 100%;
}
div .hover {
  height: 20px;
  color: white;
  background-color: black;
}
div:hover .default {
  height: 0px;
}

<div>
  <span class="default">HOME</span>
  <span class="hover">HOME</span>
</div>

Answer 3

鉴于你的第一个例子，这个例子隐藏了文本的顶部。只需在动画中使用行高

只需添加div span样式：

line-height: 5px; /* play with the value till desired look is reached*/

https://jsfiddle.net/w0ydLg9h/

CSS隐藏文本的顶部

3 个答案: