Raphael button with label

Question

I made a button with text using jquery plugin Raphael and everything would be fine apart from that when user hover over text - cursor changes and he cannot click the button anymore!

Like : http://jsfiddle.net/sidonaldson/qcXHu/

var buttonText = rsr.text(140, 60, "BUTTON1")

So how can I 'blend' text with button so that text is still on top but user cannot actually hover over it ?

Answer 1

Add

buttonText.node.setAttribute("pointer-events", "none");

and similar for the circleText. This will make the text ignore (or pass-through) mouse events to the element below (the button).