Question

我希望在悬停按钮中使用我的自定义内容替换defult内容。

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

<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%);
}

Answer 2

检查一下我相信这会对你有所帮助......

<button class="button" type="button" data-hover="CLICK ME" data-active="I'M ACTIVE"><span>HOVER EFFECT</span></button>

为按钮编写自定义处理程序作为数据悬停，您可以轻松地在其中更改测试，...

用效果改变文本

2 个答案: