Hover 鼠标在多个元素上闪烁

我正在创建一个交互式应用程序，允许人们定制门。为了让他们选择信箱，我想在他们悬停在门上时显示它，并在他们悬停在门外时移除它。这很好，但当我将信箱悬停时，门“悬停”被触发

这会产生一种奇怪的闪烁效果

我在这里创建了一个显示此效果的

只是想知道有没有人能解决这个问题？

---

基本上，当用户将鼠标悬停在门上时，我需要信箱保持在原位，我还需要门和信箱的点击状态。

不确定这是否是最有效的方法，但它是有效的

---

我现在还不知道解决办法，但你需要检查一下鼠标是否在信箱上方，然后再移除。至于做到这一点，我不知道。

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

});