html - 更改悬停中的文本效果

Question

我想用悬停按钮中的自定义内容替换默认内容。

我在这里找到了一个很好的例子:

<iframe height='268' scrolling='no' src='//codepen.io/Jintos/embed/rolim/?height=268&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/Jintos/pen/rolim/'>Change text on :hover and :active </a> by Jintos (<a href='http://codepen.io/Jintos'>@Jintos</a>) on <a href='http://codepen.io'>CodePen</a>.

它起作用了，新文本从左到右出现。(有效)

请告诉我如何定制它从上到下(而不是从右到左)

Answer 1

检查笔的完整代码。对于从上到下的效果，您必须更改隐藏文本的初始位置:

.button:before {
    content: attr(data-hover);
    -webkit-transform: translate(0,-150%);
    -moz-transform: translate(0,-150%);
    -ms-transform: translate(0,-150%);
    -o-transform: translate(0,-150%);
    transform: translate(0,-150%);
}