CSS rollover to change background image

I have the following code:
<style>
#item1
{
DISPLAY: block;
BACKGROUND: url(ProjMenuImgs/ProjBtn.gif) no-repeat 0px 0px;
WIDTH: 87px;
HEIGHT: 94px;
}
#item1:hover { background-position: 0 -92px; }
</style>...<A id="item1" class="toggle" href="#"></A>The ProjBtn has top and
bottom half for the rollover effect. However, I found that if I change
#item1 to 'a' (or assign a class to the a and change it to '.toggle'), e.g:
#item1:hover { background-position: 0 -92px; }to a:hover {
background-position: 0 -92px; }(or .toggle:hover {...},the rollover won't
work. Since I have a lot of Links (each has the top/bottom images) need have
the rollover function. I don't want to give every anchor an ID. Any problem
in my current code? Thanks. Or any better way to implement image toggling
when mouse over?

nick wrote:

The ProjBtn has
top and bottom half for the rollover effect. However, I found that if
I change #item1 to 'a' (or assign a class to the a and change it to
'.toggle'), e.g: #item1:hover { background-position: 0 -92px; }to
a:hover { background-position: 0 -92px; }(or .toggle:hover {...},the
rollover won't work. Since I have a lot of Links (each has the
top/bottom images) need have the rollover function. I don't want to
give every anchor an ID. Any problem in my current code? Thanks. Or
any better way to implement image toggling when mouse over?

I don't really understand what you mean. I do it like this:
http://www.nrkn.com/cssRollover/