表单提交按钮悬停效果未显示

时间:2012-07-31 03:55:00

标签: css forms html5 css3 hover

我有表单的提交按钮。我使用精灵作为背景,所以在悬停时我将背景移到我的按钮的宽度上以获得悬停效果。但是,这不起作用。

这是我的HTML:

<form class="a">
<All the other Fields...>
<p><input type="submit" value="Submit"/><p>
</form>

我的css:

.a input[type="submit"] {
    margin-top: 15px;
    background: url(btn.png) no-repeat;
    width: 108px;
    height: 42px;
    border: none;
    color: transparent;
    font-size: 0;
}

.a input[type="submit"]:hover {
    background: url(btn.png) no-repeat 109 0;
}

3 个答案:

答案 0 :(得分:2)

.a input[type="submit"]:hover {
    background: url('btn.png') no-repeat 109px 0px; /*use 109px   */
}

并检查您的背景图片路径。

答案 1 :(得分:1)

背景位置:for x: %|px|left|center|rightfor y %|px|top|center|bottom

可能是

.a input[type="submit"]:hover {
    background: url(btn.png) no-repeat;
    background-position: 109px 0px; // left 109px, top 0px
}

或者

.a input[type="submit"]:hover {
    background: url(btn.png) no-repeat 109px 0px;
}

还要确保您的image路径正确。根据{{​​1}},您现在的图片应位于css所在的文件夹中。

答案 2 :(得分:0)

您的职位缺少px。有关工作示例,请参阅this fiddle