Question

我正在创建一个交互式应用程序，允许人们自定义门。允许他们选择信箱，我想在它们悬停在门上时展示它，并在它们悬停时将其移除。这样可以正常工作，但是当我将信箱悬停时，门“悬停”会被触发。

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

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

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

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

});

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

1 个答案: