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

问题描述：

我有一个表单提交按钮。我使用精灵作为背景，然后将鼠标悬停在我的按钮宽度上以获得悬停效果。但是，这不起作用。表单提交按钮悬停效果不显示

这是我的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; 
}

背景图片的路径是否正确？ – j08691 2012-07-31 04:01:24

答

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

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

答

你错过了你的位置px。见this fiddle的工作示例

答

这可能是

.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路径是正确的。根据url(btn.png)，现在您的图片应该位于您的css所在的文件夹中。

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

相关推荐