How to unbind hover states but restore it back to others?
<p>What I would like happen is this</p>

<p>I hover over the elements and their captions appear. That's easy. </p>

<p>But I also want to click the element and keep that hover state there, while the others still have the hovering effect. </p>

<p>I can't seem to do the 2nd step right. I don't know how to add the hover states back on after I click other elements. </p>

<p>Here is what I have so far: </p>

<p><a href="http://jsfiddle.net/62cRZ/1/" rel="nofollow">http://jsfiddle.net/62cRZ/1/</a></p>

<p>Thank you</p>

<p>EDIT: 
Sorry for the bad description. Here's what I meant. 
Okay so there's image1 and image2
When I click on image1, the caption stays, no more fading out. 
When I hover on image2, the caption fades in and out.</p>

<p>Now I click on image2, the caption now stays, no more fading.
BUT image1's fading caption returns back to the original state where it's fading in and out when you hover in and out. </p>
