I'm trying to draw a button using jQuery SVG, the button is a filled rect and the text is placed on top of the rect. Rect and text are grouped and I want to control the mouseover/mouseout events. The problem is: mouseover/mouseout events are triggered separately for every element of the group. Is it possible to make a single event handler for entire group?

Here is an example:

    gClear = svg.group();
    btClear = svg.rect(gClear, 10, 10, 100, h-20, 5 ,5, attrs);
    txtClear = svg.text(gClear, 35, 30, "Clear", {fontFamily: "Verdana", 
      fontWeight: "bold", fontSize: "16px"});

    $(gClear, svg.root()).bind("mouseover", function()
    {
        $(btClear).animate({svgFill: '#adf'}, 100);
    }).bind("mouseout", function()
    {
        $(btClear).animate({svgFill: '#fff'}, 100);
    })

When I move the mouse inside the rect the events mouseover/mouseout are triggered. Can I make "text" events transparent or can I have a single event handler for the group?