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