How to add and remove glow for Raphael element?

Question

I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out ho

Answer 1

The solution is probably more simple than you were thinking.

http://jsfiddle.net/vszkW/2/ (fork from Matt's fiddle)

You just have to stock the "glow" which is an element. And as usual in Raphael, the elements have a .remove():

myCircle.hover(
    // When the mouse comes over the object //
    // Stock the created "glow" object in myCircle.g
    function() {
        this.g = this.glow({color: "#FFF", width: 100});
    },
    // When the mouse goes away //
    // this.g was already created. Destroy it!
    function() {
        this.g.remove();
    });