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;
If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.
Icon Hover CSS
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