借助 Raphael.js 脱颖而出并焕发光彩

Question

编辑：写完我的问题后，我想到 toFront() 代码可能会在 DOM 中的不同位置重新创建该元素。当它首先删除该元素时，它可能会丢失 IE 和 Opera 附加的任何事件，因此是我的问题。我将致力于制定委托活动替代方案，但仍愿意接受建议。

---

我在拉斐尔纸上画了一些形状，当你将鼠标悬停在它们上方时，它们应该会发光。然而，由于这些形状彼此直接相邻，为了确保您看到周围的发光，我必须将当前形状放在前面。

当前元素位于顶部，因此它的发光将出现在相邻形状的顶部。我的代码在 Webkit 和 Firefox 中运行良好，但在 Opera 或 IE 中不起作用。

一旦我添加了置于前面的代码，鼠标移出事件就永远不会在 Opera/IE 中应该触发的时候触发。

请参阅我在 JS Fiddle 上的示例，该示例在 Opera/IE 上已损坏。如果您注释掉 toFront() 行，它将在所有浏览器中按预期触发 mouseout 事件。

在该示例中 - 由于鼠标移开永远不会触发，因此发光仍然存在 - 每个形状都会产生多个发光。我可以通过在添加之前检查发光来解决此问题，但这并不能解决问题。

编辑 2： 所以我想出了 使用单个变量存储发光对象的解决方案 似乎可以解决问题。有趣的是，包含 div 上的 mouseout 事件实际上并没有在 Opera 中被调用（尚未检查 IE）。哇老兄，这么近:(

Answer 1

这在 Opera 中适用于我，还没有在 IE 中尝试过，但它应该可以工作：

paper.forEach(function(element) {
    element.hover(function() {
       if (!glow) {
           this.toFront();
           glow = this.glow({ color: "#555", width: 10 });
       }
    },
    function(){
       glow.remove();
       glow = false;        
    }             
);
});

http://jsfiddle.net/76bjf/