在拉斐尔撤消前线？

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)将克隆移到前面.由于它将共享原始位置,因此其悬停事件将立即触发.

它不是一个非常干净的解决方案,但它比试图重新组织元素以重新创建特定订单更好(更简单,更有效) - 特别是如果你有很多元素.