Is there a more efficient way to achieve the functionality I want with this code? I currently have an image that changes on hover from a sprite sheet, but I also want it to display a third image when clicked. How can I implement this?
HTML:
<a href="<?php echo base_url('home/linkedin_login')?>" ><img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png"></a>
CSS:
[class^="signin-"] {
display: inline-block;
vertical-align: text-top;
background-image: url('../images/signin_sprite.jpg');
background-repeat: no-repeat;
*margin-right: .3em;
}
[class^="signin-"]:last-child {
*margin-left: 0;
}
.signin-all{
background-position: 0px 0px;
width: 132px;
height: 37px;
position: absolute;
}
.signin-all:hover{
background-position: 0px -34px;
width: 132px;
height: 34px;
position: absolute;
}