Form submit button with css sprites?

Question

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

methode · Accepted Answer · 2010-10-08 08:03:55Z

3

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

answered Oct 8, 2010 at 8:03

methode

5,4582 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex Over a year ago

tx i had to alter the code a bit but your suggestion helped a lot

Collectives™ on Stack Overflow

Form submit button with css sprites?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related