如何在Raphael JS中使圆圈和文本成为一个对象进行悬停？

Question

I have a circle (circle3) with a text inside (text3). I want to animate the hover state which I can do nice with the circle, but the problem starts when I hover over the text inside the circle. The javacscript thinks I am avay from circle and start the second part of the hover function. But I need that it thinks that text area is part of the circle so it will stay in hover state even I hover over the text. how to accomplish such thing?

EDIT: I have figured out ho wto merge multiple object, however, know the fill atribute aplies also on the text not only the background (so the text is after hover not visible, because it has the same color as the background), so I need to somehow figured it out. Any advice?

My code that I need to modify:

st.push(
                                circle3,
                                text3
                            );

                            // st.animate(fillerHover, 500);
                            st.hover(function () {
                                st.animate(fillerHover, 500);
                              },
                              function () {
                                st.animate(filler, 500);
                              }
                            );

Ok

Answer 1

Ok, solved by myself. This is the final working code:

st.push(
                                    circle3,
                                    text3
                                );

                                st.attr({"cursor": "pointer"});


                                st.hover(function () {
                                    st.animate(fillerHover, 500);
                                    text3.animate(fillerTextHover, 500);
                                  },
                                  function () {

                                    st.animate(filler, 500);
                                    text3.animate(fillerText, 500);
                                  }
                                );