So I have an interactive piece with several shapes. There are about 5 rectangles, 3 horizontal and 2 vertical. For aesthetics and to fit them all in the space (stage), they overlap slightly. Whenever you mouseover a single rectangle it pushes the other rectangles away and a text bubble appears. When you mouseout, the text box goes away and the rectangles return to their original position. This worked without glitches when I applied it to the first rectangle. Now that I'm applying this to all of the other rectangles, I'm running into trouble. I'm thinking the trouble is with the overlapping portion. If you hover one rectangle where it overlaps another rectangle for a split second it plays the correct animation but then I think it tries to also play the animation for the other overlapping rectangle that appears underneath.
So my question is, what is the best way to remedy this problem? On mouseover can I temporaily disable mouse events for the other rectangles once one has been triggered? And then maybe re-enable them on mouseout? Is there a way for the rectangle that is visually on top to be the one that recieves the mouseover event?
Any suggestions would be great.
Thanks for the suggestion. I need all of the rectangles to be visible at all times. (they move into different positions on hover) But maybe its a matter of putting the mouse events on something that doesn't have to be visible.
Right - you could use transparent rectangles. (rectangles with opacity set to zero in the color picker on the left panel). Hard to say since I am not seeing your composition. Also you can use z-index to move layers up and down as they are being used.
Sample for z-index: