EDIT: After writing my question, it has occurred to me that the toFront() code probably recreates the element in a different position in the DOM. When it removes the element first, it probably loses any events attached for IE and Opera, hence my problem. I will work on a delegated event alternative but still open to suggestions.

I have shapes in a Raphael paper that are suppose to glow when you hover over them. However, since these shapes are position directly next to each other, to make sure you see the glow all the way around I have to bring the current shape to the front.

This the current element is on top, so it's glow will appear over the top of adjacent shapes. My code works fine in Webkit and Firefox, but it doesn't work in Opera or IE.

Once I added in the bring to front code, the mouseout event never trigger when it should in Opera/IE.

Please see my example on JS Fiddle which is broken for Opera/IE. If you ment out the toFront() line, it will trigger the mouseout event as expected in all browsers.

In that example - since the mouseout nevers get trigger, ergo the glow remains - multiple glows build up per shape. I can fix this by checking for the glow before adding it but this doesn't fix the problem.

EDIT 2: So I've e up with a solution that uses single variable to store the glow object which seems to fix the problem. Interestingly enough though, a mouseout event on the containing div doesn't actually get called in Opera (haven't checked IE). Awww man, so close :(

EDIT: After writing my question, it has occurred to me that the toFront() code probably recreates the element in a different position in the DOM. When it removes the element first, it probably loses any events attached for IE and Opera, hence my problem. I will work on a delegated event alternative but still open to suggestions.

I have shapes in a Raphael paper that are suppose to glow when you hover over them. However, since these shapes are position directly next to each other, to make sure you see the glow all the way around I have to bring the current shape to the front.

This the current element is on top, so it's glow will appear over the top of adjacent shapes. My code works fine in Webkit and Firefox, but it doesn't work in Opera or IE.

Once I added in the bring to front code, the mouseout event never trigger when it should in Opera/IE.

Please see my example on JS Fiddle which is broken for Opera/IE. If you ment out the toFront() line, it will trigger the mouseout event as expected in all browsers.

In that example - since the mouseout nevers get trigger, ergo the glow remains - multiple glows build up per shape. I can fix this by checking for the glow before adding it but this doesn't fix the problem.

EDIT 2: So I've e up with a solution that uses single variable to store the glow object which seems to fix the problem. Interestingly enough though, a mouseout event on the containing div doesn't actually get called in Opera (haven't checked IE). Awww man, so close :(

• javascript
• svg
• raphael

• if you use jquery too, you can use .live if that is indeed the case (recreating). alternatively, does modifying the z-index work (instead of calling toFront)? – mpen Commented Jan 31, 2012 at 0:32
• 1 I've already tried z-index and it doesn't work in SVG. jQuery .live() is deprecated as of v1.7 so I'm trying .on() but haven't finished refactoring yet. – Cobby Commented Jan 31, 2012 at 0:53
• @Mark Delegating events doesn't solve it either, I have another idea I might try. – Cobby Commented Jan 31, 2012 at 1:15
• @Mark My other idea sort of worked (See Edit 2 in my Q). Looking into alternative ways to trigger a paper-wide mouseout now. – Cobby Commented Jan 31, 2012 at 1:30

1 Answer 1

This works for me in Opera, haven't tried in IE but it should work:

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/76bjf/