Mike The Coder

Use jQuery to fade to a different background image on submit button hover

There’s a pretty common and nice looking that lets you fade to a different background image when you hover over a link, div, etc. For an example, see Dragon Interactive’s navigation. That method basically involves adding an empty span tag inside the link or div, and setting it to take up the full available space but be transparent. Then, on hover, you fade it into view (and you can set whatever background image you want on it so it looks nice and pretty).

However, that method doesn’t work on form submit button inputs since you can’t add HTML inside an <input> tag (since they’re self-closing). So you’re stuck trying to figure out another method. Here’s a simple one that worked for me.

Basically, instead of setting a span inside the element, you wrap the element in a div, so you’re basically doing the opposite. Then, you can set whatever background image you want on the div, and write a bit of jQuery that, on hover, fades the button to an opacity of 0.01 (so it’s transparent, showing the div’s background image instead of the button’s, but still clickable).

Here’s some code to illustrate:

The HTML for the submit button

The jQuery which wraps the submit button in a div and does the fading on hover/mouseout

The CSS to replace the button with an image (using a large negative text-indent which is just my preferred method) and to set the background image on the background div

Give me a shout if you try it out and have trouble.