我试图在悬停时创建一个文本出现在另一个文本之前的按钮。我实现了这一点,但不能对此施加任何延迟。
看看这个词有多快"让""出现。需要放慢速度。
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn:hover::before {
content: "Let's ";
}

<button class="btn">
Go
</button>
&#13;
我尝试使用此答案switching out link text on hover - transition,但它实际上是替换了原始文本吗?
答案 0 :(得分:4)
您可以最初显示文本并创建宽度转换,例如:
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn::before {
display:inline-block;
vertical-align:text-bottom;
content: "Let's ";
max-width:0px;
white-space:nowrap;
overflow:hidden;
transition:1s;
}
.btn:hover::before {
max-width:50px;
}
&#13;
<button class="btn">
Go
</button>
&#13;
答案 1 :(得分:4)
尝试将transition-delay
与opacity
.btn {
width: 100px;
height: 100px;
border: none;
background-color: mediumseagreen;
transition: width 0.5s ease;
}
.btn:hover {
width: 200px;
}
.btn::before {
opacity: 0;
content: "Let's ";
transition: all .3s linear 0s;
position: absolute;
transform: translateX(-110%);
}
.btn:hover::before {
transition: all .5s linear .3s;
opacity: 1;
}
&#13;
<button class="btn">Go</button>
&#13;
答案 2 :(得分:0)
您可以通过在转换中添加延迟来实现这一目标吗?
.btn {
transition-delay: 2s;
}