CSS Sprites - How to leave Hover button in depressed state


Tags: javascript,html,css,css-sprites,sprite

Problem :

CSS Sprites (button) with three different states:

  1. Standard
  2. Hover
  3. Pressed (active)

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>


Solution :

Thanks everyone for your help - tremendously awesome. It ends up being a combo of new CSS classes and javascript. This new code allows the 3 states mentioned above (Normal, Hover, Pressed). When the "Pressed" state is clicked again, the (sprites) button appears back at its normal state.

Here is the final code:

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
   $('.button').click(function() {
    $(this).toggleClass('button').toggleClass('button1').toggleClass('active');
});   
});

</script>   

<style type="text/css">

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; 

}

a.button1:active { 
background-position: 0 -260px; 

}

</style>

<a class="button" href="#" ></a>

</html>

    CSS Howto..

    How to select a language from a popup click button in css/html ?

    How to turn off spell checking WebStorm of css?

    How to create a Page Header (an Image) for print using css

    How to remove the border that show after clicking a picture

    How to get the position of element transformed with css rotate

    How to Use jquery Animate() with .slideToggle() Between Two Classes

    how to properly override CSS in external file

    How do I make a table's columns fill the width not occupied by fixed-width columns?

    How to target tablet devices with CSS queries

    How to create a relative inline style?

    How to I make the width of my CSS wrapper relative to the size of the monitor?

    Test if is visible with ng-show attribute

    How to move text up using CSS when nothing is working

    How do I place an image after a link?

    How to select the first, second, or third element with a given class name?

    How to remove gap in masonry?

    When I click on each button its shows me the same content of the first button

    How do I make background-size work in IE8?

    How to achieve this view?

    How to set style for n-th td in a table using css

    How to use cross domain dynamically generated CSS

    how are large quantities of css templates produced?

    DevTools: How to visualize scss changes automatically without the need to save

    how do i get images to display in a rows like this using php and css?

    How to make a div scroll able when window height is reached

    How can I show a loading screen while a really large image is loading?

    How to exclude an HTML element form Ionic CSS

    How do I specify that a html cell should have the minimum width it needs to display all of its content

    How to stretch images with no antialiasing

    How to use Bootstrap 3 grid if elements are tiled with different height and widths