How to make circle and text inside the circle one object for hover in Raphael JS?
===

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.

My code that I need to modify:

    var filler = {
    	'fill': 'white',
    	'stroke': 'white',
    	'stroke-width': '0'
    	}
    var fillerHover = {
    	'fill': '#b6def1',
    	'stroke': '#b6def1',
    	'stroke-width': '0',
    	'cursor': 'pointer'
    	}
    var fillerText = {
    	"fill" : "#00738f",
    	"font-size": 14,
    	"font-family": "Arial, Helvetica, sans-serif"
    	}
    var fillerTextHover = {
    	"fill" : "#00738f",
    	"font-size": 14,
    	"font-family": "Arial, Helvetica, sans-serif",
    	"cursor": "pointer"
    	}
    
    circle3.hover(function () {
		    circle3.animate(fillerHover, 500);
 		  },
    function () {
    		    circle3.animate(filler, 500);
    		  }
    );

    text3.hover(function () {
                    text3.attr(fillerTextHover);
     		  },
    function () {
    		    text3.animate(fillerText, 500);
    		  }
    );

