Flex: Highlighting element on mouse over

I have a canvas with several small canvases on it.

Like this:

public class Board extends Canvas
{
    public function Board()
    {
        //cellWidth = this.width/boardSize;
        //this.drawMech();
        addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
        super();
    }

then I added balls to the board using this.addChild(ball);

And ball

public class Ball extends Canvas
{       
    public function Ball()
    {
        addEventListener(FlexEvent.CREATION_COMPLETE, 开发者_运维百科creationComplete);
        super();
    }

    public function creationComplete(event:Event):void
    {
        trace("created stones");
        //Alert.show("Creation complete ever called");
        addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
        //addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
    }

What I want to implement is:

I want the ball which I added to canvas Board, became highlighted (e.g. changed it's color) on mouse over on it, and became unhighlighted after mouse is go out of ball.

What I have done to achieve it. I added 2 event listeners to ball class, in order to listen for mouse over and mouse out events...But for some reason they was not called.

Your class's name is Ball and constructor's name is Stone. The line addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete); will never be called. Change the constructor name to Ball.