CSS隐藏文本的顶部部分
CSS隐藏文本的顶部部分
提问于 2016-04-20 07:32:03
我更喜欢CSS唯一的解决方案；我可以更改结构；总是只有一行文本
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目前正在从底部滑动，因为当高度降低时，文本从下到上隐藏。
我想隐藏文本从上到下，这样它将看起来像相同的文本是倒置它的颜色。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-04-20 08:28:51
通过在原点项目上使用绝对定位元素，我解决了这个问题：
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>
Stack Overflow用户
发布于 2016-04-20 07:55:44
你反对我用伪元素来做吗？我使用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>其他解决方案保持结构并避免内容属性中的文本
<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; }Stack Overflow用户
发布于 2016-04-20 07:54:36
对于第一个例子，这个例子隐藏了文本的顶部部分。只要在你的动画中玩线高就行了
只需添加div span样式：
line-height: 5px; /* play with the value till desired look is reached*/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36736811
复制相关文章
相似问题
腾讯云开发者
