Menu
CSS Sprites (button) with three different states:
Currently "Standard", "Hover", and "Pressed" work. The issue is, "Pressed" only stays pressed as the mouse is held down. I would like the "Pressed," or active, state to stay active until it is clicked again. Any ideas? CSS solution? javascript solution?
Thanks for your help, D
Here's the code:
<html>
<style type="text/css">
a.button {
background-image: url('BUTTON SPRITES IMAGE');
width: 86px;
height: 130px;
display: block;
text-indent: -9999px;
}
a.micbutton:hover {
background-position: 0 -130px;
}
a.micbutton:active {
background-position: 0 -260px;
}
</style>
<a class="button" href="#" ></a>
</html>
887
add an active class:
a.button {
background-image: url('BUTTON SPRITES IMAGE');
width: 86px;
height: 130px;
display: block;
text-indent: -9999px;
}
a.button:hover {
background-position: 0 -130px;
}
a.button:active, a.active {
background-position: 0 -260px;
}
Then when your button is active simply add the class:
<a class="button active" href="#" ></a>
Add an active class was correct. Using the toggleClass on click function adds the active class and removes class on second click. This is what you were after I believe.
Fiddle
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
