I have a navigation made up of buttons that use image sprites. I want the buttons to remain in a "rolled over" state once clicked, even when navigating to different pages. They should revert back to normal when clicked again.
Although I am new to JavaScript, I believe there must be a way to achieve this functionality.
An example button is shown below:
<a class="contact" href="#" >Contact</a>
Below is the CSS used to create the rollover effect:
a.contact {
display: block;
width: 30px;
height: 31px;
margin-right:39px;
float:right;
background: url(../img/navcontact.png) no-repeat bottom;
text-indent: -10000px;
}
a:hover.contact {
background-position: 0 0;
}