Flickering on mouse-over on multiple elements

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.

---

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);
    };

});