我正在创建一个按钮,当鼠标悬停时该按钮会增加它的宽度,然后会出现一个 >
符号。我不明白如何做到这一点。我已经实现了所有的东西,但唯一不起作用的是,>
在悬停时立即显示,文本被换行。
.start-quiz > button {
text-align: left;
padding-left: 25px;
width: 100px;
}
.start-quiz > button:hover {
width: 125px;
transition: width 0.5s linear;
}
.start-quiz > button:hover:after {
content: " >";
transition: content 0.5s ease;
}
最佳答案
content
不可转换。您可以设置不透明度,然后像这样为其定义过渡
.start-quiz > button {
text-align: left;
padding-left: 25px;
width: 100px;
}
.start-quiz > button:hover {
width: 125px;
transition: width 0.5s linear;
}
.start-quiz > button:after {
content: " >";
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
.start-quiz > button:hover:after {
visibility: visible;
opacity: 1;
}
关于css - 阻止 "::after"直到 `transition` 完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58258931/