Question

I have a submission button for a form. I use a sprite as the background, and so on hover I shift the background over the width of my button to get the hover effect. However, this is not working.

This is my html:

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

And my 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;
}

Answer 1

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

and check your background image path.