我试图让出现在悬停上的文本完全显示在框中。1) 具有内容的悬停效果,2) 使用关卡/关卡项目,以及 3) 希望在框内创建相等的垂直居中的混合使这有点复杂。下面是文本如何向右溢出的屏幕截图。请注意,我必须使用纯 CSS 来实现这一点。
目前我有以下代码:
.hover-box {
width: 100%;
height: 10rem;
background-color: blue;
}
.showme {
display: none;
transition: all 2s ease;
vertical-align: middle;
}
.hover-box:hover .showme {
display: inline;
}
.hover-box:hover .ok {
display: none;
}
<div class="columns has-text-centered">
<div class="column is-paddingless border height">
<div class="level hover-box has-text-centered">
<div class="level-item">
<p class="showme is-size-5 has-text-white has-text-centered">State the purpose and importance of conversation</p>
<p class="ok is-size-1 has-text-white title is-uppercase">Open</p>
</div>
</div>
</div>