How can I change a css :hover state to a click event?

css

Solution

Something like this:

http://jsfiddle.net/VfNdE/61/

The old hover classes become focus:

.thumbnail:focus{
   background-color: transparent;
   outline:none;
}

.thumbnail:focus img{
   border: 1px solid blue;
}

and the old html simply has tabindex added like follows for each anchor:

<a class="thumbnail" href="#thumb" tabindex="1">

Problem

I followed the details in the link for creating a image gallery. And that approach works fine for me. I want to change the mouse `hover` event to a `click` event so that when a thumbnail is clicked (instead of hover), its open image in large area.

Original source