Raphael JS background change

Question

would like to know why the color of the rectangle change when I'm on the text. I would like the background color is always the same as I am in the rectangle.

http://jsfiddle.net/yVzXF/11/

paper = new Raphael(document.getElementById('canvas_container'), 500, 250);

rectangle2 = paper.rect(130, 75, 140,40,15);
texte = paper.text(200, 90, "Tarification et souscription\nweb")

rectangle2.mouseover(function(){
    this.animate({
    fill : "#aaa"
    });
    });

rectangle2.mouseout(function(){
    this.animate({
    fill : "#F90"
    });
    });

thanks

score 1 · Accepted Answer · answered Apr 29 '13 at 13:19

The text is a separate element, so it has separate event handlers. If you add the event handlers for the text as well, you'll get the result I think you're looking for:

texte.mouseover(function(){
    rectangle2.animate({
        fill : "#aaa"
    });
});

texte.mouseout(function(){
    rectangle2.animate({
        fill : "#F90"
    });
});

Here's your updated jsFiddle

Raphael JS background change

1 Answers1