Cannot get a:hover to move background

HTML & CSS
1

Hello there,

I am in need of getting my css code to work for my submit form button.

Can anyone help?

I have this site: Basic Colorado Flag T-Shirt | ActiveState Designs (long story why there’s two buy now buttons, but just pay attention to the top one).

I can’t get the a:hover to work and change the background-position to 0 -30px. The class is “buy_button”. Code is:

.buy_button {height:30px;width:160px !important;cursor:pointer;overflow:hidden;padding:0;border:0 none;background:url(images/buy_now.png) no-repeat top left;}
a.buy_button:hover, a.buy_button:focus {background-position:0 -30px;}

I HAVE ALSO TRIED:

buy_button a:hover, buy_button a:focus {background-position:0 -30px

Ideas? Thanks,
Lorne

2

The CSS for the hover and focus states won’t work because the class is part of an input button and you have told your CSS to look for an anchor tag with the class of buy_button which it can’t do. Simply remove the a from the selector and it will work fine.

3

SgtLegend,

I appreciate the help. Although that didn’t seem to work :frowning:

I tried this:

.buy_button {height:30px;width:160px !important;cursor:pointer;overflow:hidden;padding:0;border:0 none;background:url(images/buy_now.png) no-repeat top left;}
.buy_button:hover input {background-position:0 -30px;}

I ALSO TRIED:
.buy_button:hover {background-position:0 -30px;}

Neither worked :frowning: Is it because the class is in the input field?

Thanks,
Lorne

4

YES! I got it,

I removed the input and it worked, however that didn’t work the first time I tried it!

Thanks for the help,
Lorne