在多個元素上的鼠標移動閃爍

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

});