Flickering on mouse-over on multiple elements - hover

Question

I'm creating an interactive app allowing people to customise doors. To allow them to select the letterbox I want to show it when they hover over the door and remove it when they hover out. This works fine, but when I hover the letter box the doors 'hover out' is fired.
This causes a strange flickering effect.
I have created a jsfiddle here showing this effect
Just wondering if anyone has a solution to this?
I basically need the letterbox to stay in place when the user hovers the door, I also need a click state for both the door and letterbox.

Answer 1

not sure if this is the most efficient method, but it works. jsfiddle
var doorClickState, letterbox, inletterbox = false;
$(function() {
var paper = Raphael("canvas", 330, 457);
//draw the door
doorClickState = paper.path("M0,0v200h117V0H0z").translate(0, 0).attr({
fill: "#FF0000",
stroke: 0,
opacity: 0.9
}).toFront();
//draw and hide letterbox
letterbox = paper.path("M0,0v15h60V0H0z").translate(30, 100).attr({
fill: "#000000",
stroke: 0,
opacity: 0.9
}).hide();
//click states for both
doorClickState.click(function() {
alert('door clicked');
});
letterbox.click(function() {
alert('letterbox clicked');
});
doorClickState[0].onmouseover = function() {
letterbox.show();
}
letterbox[0].onmouseover = function() {
inletterbox = true;
}
letterbox[0].onmouseout = function() {
inletterbox = false;
}
doorClickState[0].onmouseout = function() {
setTimeout(function() {
if (!inletterbox) {
letterbox.hide();
}
}, 20);
};
});