jQuery image hover menu picture overlaps nearby pictures

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.

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.

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

In short, How can I tell jQuery to detect when the mouse is over red square number two, yet not raising the ev开发者_JS百科ent if the mouse is over green square.

[in my demo picture, hovering on point]

I'm going to preface this first by asking a few questions.

• Is Box "1" also the green box?
• Did you use z-index to place 1 over 2?

If so, here's your fix.

$(document).ready(function(){
    $('.box').mouseover(function(){
        $(this).css('width', '300');
    });
    $('.box').mouseout(function(){
        $(this).css('width', '200');
    });
});

Box is a class applied to all 4 boxes which widens the hovered box to 300px before shrinking it back down to 200px when moused off.

Regardless, you need to elaborate on the process being used. Can you post some code?

You haven't posted any code, but...

You could create some empty div tags with the same dimensions as their respective red square, and have them sit atop their red square with position:absolute and a high z-index value, and have a mouseover function attached to these empty divs that would shrink the green square.

And you could make the empty divs only be displayed (though they'll be hidden to the user) when the green square is enlarged, and hidden otherwise.