Mouseevent when near an Element with Raphael - mouseevent

Question

According to this question
Raphael - event when mouse near element
i create a invisible rectangle around another rectangle ,
when the mouse is over that large rect, a circle will appear.
but because the large rect is on top of the small rect,
i can't process another event when mouse is over the small rect.
(if the small rect is on top , the point will disappear when i reach the small rect)
And i want also to have another event with the circle.
Is there any solution for this?
Hier is the code

Answer 1

Kind of mimicking the events of the larger rectangle with the smaller one:
var paper = new Raphael(0, 0, 500, 500);
createRect(100, 100, 100, 50);
function createRect(x, y, width, height) {
var boundrect = paper.rect(x - 30, y - 30, width + 60, height + 60).attr({
"fill": "pink",
"stroke": "none"
}).mouseover(function(event) {
topCtrl.show()
}).mouseout(function(event) {
topCtrl.hide()
})
,
rect = paper.rect(x, y, width, height).attr({
"fill": "white",
"stroke": "red"
}).mouseover(function(event) {
topCtrl.show();
topCtrl.attr({
"fill": "white"
})
}),
topCtrl = paper.circle(x + (width / 2), y, 5).attr({
"fill": "red"
});
}