jQuery image hover menu picture overlaps nearby pictures
<p>I am developing a small web app that uses jQuery quite a lot. In my app, a user can hover an image, which becomes bigger after a few seconds, giving him more details.</p>

<p>The problem is that when the image enlarges the image, it takes over the area of the nearby images as well. Now, if the user goes over the second red square (numbered as 2) I would like the currently enlarged image to disappear and instead enlarge the image pictured below as square two.</p>

<p>I am not much of a painter, but I have attached a small image to help illustrate the problem.</p>

<p>In short, How can I tell jQuery to detect when the mouse is over red square number two, yet not raising the event if the mouse is over green square.</p>

<p>[in my demo picture, hovering on point]</p>

<p><img src="http://i46.tinypic.com/3y1x5.png" alt="Hovered menu sample"></p>
