html - 对 input[type=submit] 应用某种效果

Question

我在按钮和菜单链接上使用 CSS 悬停效果。这些链接工作正常，因为它们是 anchor 标记，而按钮不起作用，因为它们在表单中用作输入 [type=submit]。

HTML:

<div class="submit">
      <span data-hover="Send">
            <input type="submit" value="Send">
      </span>
</div>

.submit-wrapper 类用于装饰(如下面的 CSS 所示)，而 span 应用实际的悬停效果。

CSS:

.submit /* Need this to hide the second text -- otherwise it will show beneath */ {
    overflow: hidden;
}

.submit > span {
    position: relative;
    display: block;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.submit > span::before /* The effect in place */ {
    padding-top: 49px;
    content: attr(data-hover);
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    left: 28px;
    top: 0;
    letter-spacing: normal;
}

.submit:hover > span, .submit:focus > span /* The actual effect on hover */ {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

问题是:我无法点击按钮。它显示默认光标并完全忽略它是一个按钮(输入提交类型)的事实。所以我有两个问题:

<强>1。是否可以使用 anchor 标记而不是输入类型="提交"？

<强>2。如果不是，我如何使输入 type="submit"可点击？

Answer 1

对我来说，当我将其放入 jsfiddle 时，我无法单击按钮，因为您的翻译将其移到了屏幕外。当我删除它时，我可以点击按钮就好了。

否则，您可以使用附加了 jQuery 的链接，以便在单击它时提交表单。见http://api.jquery.com/submit/