防止在覆蓋元素的元素上懸停

我正在使用SVG和Raphael JS。我有一種情況，如果你將鼠標懸停在一個元素上，第二個元素出現在第一個元素的頂部。當第二個元素出現時，鼠標現在位於第二個元素上，因此mouseout事件觸發第一個元素並隱藏第二個元素。這繼續循環。我如何防止在第一個元素上出現鼠標移出或阻止在第二個元素上懸停？防止在覆蓋元素的元素上懸停

在其他例子中，我試過我得到了閃爍的效果。下面是我在做什麼在拉斐爾的簡化版本...

window.onload = function() { 
    var paper = Raphael("container", 1000, 900); 
    var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"}); 
    var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"}); 

    rect_two.hide(); 

    rect_one.mouseover(function() { 
    rect_two.show(); 
    }); 

    rect_one.mouseout(function() { 
    rect_two.hide(); 
    }); 

};

來源

2012-09-21 user1524612

如果您放置在一組的拉斐爾元素則可以解決這個問題：

window.onload = function() { 
    var paper = Raphael("container", 1000, 900); 
    var group = paper.set() 
    var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"}); 
    var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"}); 
    group.push(rect_one); 
    group.push(rect_two); 
    rect_two.hide(); 

    group.mouseover(function() { 
    rect_two.show(); 
    }); 

    group.mouseout(function() { 
    rect_two.hide(); 
    }); 

};

http://jsfiddle.net/agdMG/

來源

2012-09-22 01:23:54 Duopixel

嗨，感謝您的回覆。上面的簡單例子工作。我似乎無法在我正在處理的代碼上得到相同的結果。當你將鼠標懸停在另一條路徑覆蓋的路徑上時，我遇到的問題是閃爍。請參閱JSFiddle上的示例： http://jsfiddle.net/adamoliver/YVHRY/ – user1524612

這對我來說調試的代碼太多了。如果你想快速修復，你可以添加'pointer-events：none'，儘管這對IE的舊版本無效http://jsfiddle.net/RHyAG/ – Duopixel