Question

I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I’d like to have it slowly fade instead.

There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn’t seem possible with a submit button, since input elements don’t seem to be able to contain child elements (ie. the other background sprites). Ideas?

Answer 1

I am not sure if this is what you are looking but take a look anyway

http://snook.ca/archives/javascript/jquery-bg-image-animations

DEMO: http://snook.ca/technical/jquery-bg/

anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.

$("div.submit").click(function() {
    document.forms[0].submit();
});

add the css, for the mouse over

div.submit:hover {
    pointer: cursor;
}