Form submit button with css sprites??

Question

Hello,

I am having a problem creating a form submit button with css sprites. It's just a button with an onrollover state. I have this .css button part

.buttonSubmit {

background-image: url(../imgs/button_states_submit.png); background-repeat:no-repeat; margin-top: 10px; float:left; height: 100px; width: 160px; } a.buttonSubmit:hover { background-position:0 -100px; }

And i the html i have

<input name="" value="" class="buttonSubmit" type="image" />

The button submits the form but the onrollover state doesn't work??? When i test with a simple a href the onrollover state works, but i don't know which jQuery selector to use to submit the form

<a href="#" id="buttonSubmit" class="buttonSubmit"></a>

in combo with jQuery

$('#buttonSumbit').click(function(){

regards

Answer 1

Your CSS:

.buttonSubmit {
    background-image: url(../imgs/button_states_submit.png); 
    background-repeat:no-repeat; 
    margin-top: 10px; 
    float:left; 
    height: 100px; 
    width: 160px; 
} 
a.buttonSubmit:hover { background-position:0 -100px; }

Note that in the second selector you are using an <a> tag which has .buttonSubmit class. I guess you want to use an input selector:

input.buttonSubmit:hover { background-position:0 -100px; }