1

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

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

3 回答 3

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

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

于 2012-07-31T04:26:11.503 回答
1

背景位置：for x: %|px|left|center|right和for 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路径是正确的。css根据url(btn.png). _

于 2012-07-31T04:20:24.683 回答
0

你px在你的位置上失踪了。请参阅此小提琴以获取工作示例

于 2012-07-31T04:20:02.287 回答