Undo toFront in Raphael?

Question

I want an element to come to the front only on hover, and then go back to the z-index it was at before when I mouse off. Is there a way for me to do this in Raphael; save the element's current z-index before calling toFront, then apply it again?

Answer 1

The short answer is, no. The reason for this is that SVG doesn't rely on a z-index attribute to determine element rendering order -- it simply uses the sequence in which they occur in the SVG document (so called "painter's order" -- from back to front). In order to replicate the same thing you'd need to record the item before the current element, move the targeted object to the end of the list of elements on hover, and then move it to its original location, after its previous sibling's position. Messy and complicated, with no built-in support.

The longer answer is that you don't really need to. Under most circumstances you can get away with this simply trick:

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

In other words, you a) Clone the object; b) Add a hover function to the clone that removes it when the hover is over; c) Move the clone to the front. Since it will share the original's location, its hover event will fire immediately.

It's not a perfectly clean solution, but it's better (simpler and more efficient) than trying to reshuffle your elements to recreate a specific order -- especially if you have a lot of elements.