:hover in CSS

:hover in CSS

Hi,

i just don't get it. This is what I have:

a {
   background: url(../images/test.jpg) no-repeat scroll 0 0;
}
a:hover {
   background: url(../images/test.jpg) no-repeat scroll -228px 0;
}


Now, when I call
$('a').css('background-position', '-500px 0');


the CSS forgets about a:hover.
1. Why?
2. How can I set a:hover in jQuery?
$('a:hover').css('background-position', '-228px 0')
doesn't work... (and I don't want to use jQuery hover() events

Cheers
Konstantin