Question

我在按钮和菜单链接上使用CSS悬停效果。链接工作正常，因为它们是锚标记，而按钮不起作用，因为它们在表单中用作输入[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。是否可以使用锚标记而不是输入类型=“提交”？

2。如果没有，我如何使输入类型=“提交”可点击？

Answer 1

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

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

将某种效果应用于输入[type = submit]

1 个答案: