jQuery hover over part of an image
<p>I have an image and a span overlapping the image. When I mouse over the image, the span pops up, and on mouse out it retreats back down. 
<br /> <strong>Here is a simplified demo: <a href="http://jsfiddle.net/cCYHp/" rel="nofollow">http://jsfiddle.net/cCYHp/</a></strong>
<br /> The problem:
<br /> I would like the spans to only popup when the SPAN area is moused over, not the image. I tried to do a <code>.hide()</code> effect but it did not work (it is commented out in the demo). I think this is because once the span is hidden, it is not able to be moused over anymore. What is the correct way to achieve this effect?</p>
