I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS.
There are no issues with the original or hover states:
#myDIV {
background-image: url(icons/homeBlack.png);
}
#myDIV:hover {
background-image: url(icons/homeWhite.png);
}
However, there are two additional things that I need to accomplish: 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 inquiries include: 1) Am I missing a CSS technique, or is jQuery the best solution for this? 2) Is there a way to determine which background-image is currently in place?
I have searched through jQuery but couldn't find anything that would help me identify the current background image.
Your assistance is greatly appreciated. Thank you.