div css onclick change multiple images

Question

So I am trying to have four small images next to each other. Each of them are links with a background image url 100x100. So let's say initially they are all gray. When I hover over one of them, they get color (new image). Also, when I click on one of the images all the other images besides that one reset to the original gray scale image except the one I clicked

Example:

Gray1 Gray2 Gray3 Gray4

Hover gray 2

Gray1 Color2 Gray3 Gray4

Click gray 2

Gray1 Color2 Gray3 Gray4

Hover gray4

Gray1 Color2 Gray3 Color4

I know how to do a hover function. But how do I make all the other images "reset" onclick? Do i need to use javascript? Can I do this with just css?

Answer 1

This can only be achieved by using JavaScript. You have to cycle thru all 4 images and set them to grey if they are not the clicked image.

I have implemented this only with colors with jquery. You may have a look at http://jsfiddle.net/kaUWC/