CODEWITHSUNDEEP
mouseeventraphael
tomen
tomen

Reputation: 539

Mouseevent when near an Element with Raphael

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

Upvotes: 0

Views: 168

Answers (1)

Joe
Joe

Reputation: 82654

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"
        });
}

Upvotes: 1

Related Questions