提交时滑动切换

Question

我正在考虑我的代码如何运作。

当我将鼠标悬停在输入提交上时，我想滑动切换div或span。像这样：

我该怎么做？我应该在提交按钮之前创建一个范围

或者

我应该使用.submit:before

添加内容吗？

Answer 1

你的意思是，像这样？你可以在没有JavaScript的情况下完成它。

button {text-decoration: none; background-color: #99f; color: #fff; font-family: Segoe UI; display: inline-block; border: 0; padding: 0; cursor: pointer;}
button span {display: inline-block; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; vertical-align: top; padding: 10px 2px;}
button span:first-child {width: 0; padding: 10px 0; overflow: hidden; background-color: #999;}
button:hover span:first-child {width: 25px; padding: 10px 0 10px 10px;}

<button type="submit">
  <span>Go</span><span>Submit</span>
</button>

Answer 2

你应该使用一些css和过渡。

HTML

<div class="element">
  <span>Go!</span>
  Send
</div>

CSS

.element:hover {
  span {
    width: 50px;
  }
}