JQuery identify current CSS background-image in three-state icon/button?

I have three images being used to indicate an application icon state and I'm attempting to use css to do this.

No problem with the original or hover states:

#myDIV {
background-image: url(icons/homeBlack.png);
}

#myDIV:hover {
background-image: url(icons/homeWhite.png);
}

but I need to do two other things: 1) when the item is clicked it should use the third image

 $("#myDIV").click(function(event){

// change this button
$(this).css("background-image", "url(icons/homeBlue.png)");

});

2) if it is clicked again it should not apply the third image again because it's already applied - so it needs to check if it has been applied

My questions are: 1) simply am I missing a css trick somewhere or is Jquery the best way to do this? 2) can I check which background-ima开发者_如何转开发ge is in place and how?

I can't seem to find anything in JQuery that would allow me to determine which image is "currently" in place.

Thanks in advance for any help.

Create 3 CSS classes:

.state_1 {background-image: url(icons/homeBlack.png)}
.state_2 {background-image: url(icons/homeWhite.png)}
.state_3 {background-image: url(icons/homeBlue.png)}

Then when you want to check the state of the DIV use e.g.:

     if ($('#myDIV').hasClass('state_3')) {......}
else if ($('#myDIV').hasClass('state_2')) {......}
else                                      {......}

To change the image, just change the class, e.g.

$('#myDIV').removeClass('state_1 state_3').addClass('state_2');

You'll have to handle hover events in jQuery, not just CSS, unless of course you could use the css modifiers ":hover", ":visited"