Question

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 event if the mouse is over green square.

[in my demo picture, hovering on point]

Answer 1

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?