I'm doing an image gallery which allows viewers to mouse over thumbnail images causing a full size version to be displayed (off to the side). The hover class does this for me but as the mouse moves off the thumbnail the full size image disappears. I'd like the full sized image to be retained even after the mouse moves off the thumbnail. I've seen this done in javaScript and am wondering if theres a technique in CSS. If so and and you know of any example code you could point me to that'd be great. Thanks!
It can't be done with just CSS. You'll need JavaScript for this. Try some JavaScript framework like script.aculo.us or jQuery, they come with many great visual effects which you can apply on almost any page object or element, whether it's an image or paragraph or link, etc...
Jochen's technically right, but wrong at the same time. The :focus psuedo selector is capable of doing this for you, but unfortunately it's not supported properly in Opera and Safari (meaning that IE and Firefox are the only two that support it properly).
Isn't there some way to use :active to show an image and it just stays until something else is clicked? I've noticed Opera is a little wierd on :active too. While in FF, continuing to hold down the mouse button no matter where it goes continues the :active state, but in Opera the effect only lasts so long as the mouse is also over the element with the :active property, and going back to the element while still holding the mouse button makes :active come back. Weird.