Web Development

I am attempting to use some social icons that change color when hovered over. The problem is that the icons do not seem to respond to the hover psuedo-class and reposition.

Currently, I have two icons on one image at 30px x 60px. I have cropped the image to 30 x 30 to show only half of the image at a time. When the image is hovered over, I told it to reposition the background using background: bottom;

Here is the code:

stylesheet:
.mainsocial {
width: 30px;
height: 30px;
float: left;
background-position: bottom;}
.mainsocial:hover {background-position: top;}

{a class="mainsocial" style="background: url('......'); href='......'}{/a}

Obviously the is substitued by {}