鼠标悬停在多个元素上时闪烁答案

【问题标题】：Flickering on mouse-over on multiple elements鼠标悬停在多个元素上时闪烁
【发布时间】：2011-06-20 16:14:15
【问题描述】：

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

这会导致奇怪的闪烁效果。

我在这里创建了一个jsfiddle 来展示这个效果

只是想知道是否有人对此有解决方案？当用户将门悬停时，我基本上需要信箱保持原位，我还需要门和信箱的点击状态。

【问题讨论】：

我不知道解决方案，但是您需要在删除之前检查鼠标是否在信箱上。至于做到这一点，我不知道。

标签： hover mouseevent mouseover raphael

【解决方案1】：

不确定这是否是最有效的方法，但它确实有效。 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);
    };

});

【讨论】：