Question

I have a slide viewer I am making.

I have all the css working perfect, and the sprites working perfect.
Issue I have is, I have a Play and a Pause icon.

They are grey normal state, and pink on hover. But when they are clicked I want them to be pink.
The issue I have is this:

When page loads, the image slider auto plays, so I would like the PLAY button automatically PINK.
Then if user clicks PAUSE button I would like the PAUSE button made PINK, and the PLAY button GRAYED !

And then vice versa, for when user clicks PLAY, this button would turn PINK and pause button GRAYED

I am not sure how to do this as regular css I am sure cannot accomplish this on its own.

css:

div.play { width: 12px; height: 17px; background: url(../images/icons/slider-controls.png) no-repeat 0 -181px; }
div.pause { width: 18px; height: 16px; background: url(../images/icons/slider-controls.png) no-repeat 0 -121px; }
div.play:hover { width: 12px; height: 17px; background: url(../images/icons/slider-controls.png) no-repeat 0 -204px; }
div.pause:hover { width: 18px; height: 16px; background: url(../images/icons/slider-controls.png) no-repeat 0 -143px; }

html:

<a href="javascript:;"><div class="pause left" id="my-start-stop"></div></a>
                <a href="javascript:;"><div class="play left" id="my-stop-start"></div></a>

js: ( for the controls )

$('#my-start-stop').click(function() {
            slider.stopShow();
            return false;
        });
        $('#my-stop-start').click(function() {
            slider.startShow();
            return false;
        });

Image Sprite is:

Answer 1

Oops, I read the div id names as the same… darn dyslexia LOL… Anyway, I changed the names and made a demo, code is below:

HTML

<a href="javascript:;"><div class="pause left" id="my-pause"></div></a>
<a href="javascript:;"><div class="play playing left" id="my-play"></div></a>

CSS

div.play, div.pause {
    float: left;
    background: url(https://i.stack.imgur.com/lqK28.png) no-repeat;
}
div.play {
    width: 12px;
    height: 17px;
    background-position: 0 -181px;
}
div.pause {
    width: 18px;
    height: 16px;
    background-position: 0 -121px;
}
div.play.playing, div.play:hover {
    width: 12px;
    height: 17px;
    background-position: 0 -204px;
}
div.pause.paused, div.pause:hover {
    width: 18px;
    height: 16px;
    background-position: 0 -143px;
}

Script

$('#my-pause').click(function() {
    $(this).toggleClass('paused');
    $('.play').removeClass('playing');
    slider.stopShow();
    return false;
});
$('#my-play').click(function() {
    $(this).toggleClass('playing');
    $('.pause').removeClass('paused');
    slider.startShow();
    return false;
});