javascript - 在 Raphael 中撤消 toFront？

Question

我希望一个元素仅在悬停时出现在前面，然后返回到鼠标关闭之前的 z-index。我有办法在拉斐尔做到这一点吗？在调用 toFront 之前保存元素的当前 z-index，然后再次应用它？

Answer 1

简短的回答是，不。这样做的原因是 SVG 不依赖 z-index 属性来确定元素的渲染顺序——它只是使用它们在 SVG 文档中出现的顺序（所谓的“画家的顺序”——从后到前） ）。为了复制相同的内容，您需要在当前元素之前记录该项目，将目标对象移动到悬停元素列表的末尾，然后将其移动到其原始位置，在其前一个兄弟的位置之后。凌乱而复杂，没有内置支持。

更长的答案是你真的不需要。在大多数情况下，您可以摆脱这个简单的技巧：

el.hover( function()
    {
        var duplicated_node = this.clone();
        duplicated_node.hover( function() {}, function()
            {
                this.remove();
            } );
        duplicated_node.toFront();
    }, function() {} );

换句话说，您 a) 克隆对象；b）向克隆添加悬停功能，当悬停结束时将其删除；c) 将克隆移到前面。由于它将共享原始位置，它的悬停事件将立即触发。

这不是一个完全干净的解决方案，但它比尝试重新调整元素以重新创建特定顺序更好（更简单和更有效） - 特别是如果你有很多元素。