TextField breaking MOUSE_OVER in as3: only after moving it!

Question

I'm having a really weird problem with the MOUSE_OVER event. I'm building dynamic tabs representing mp3 songs containing textfields with info and a dynamic image for the cover art. I am trying to get a simple MOUSE_OVER working over the whole tab, such that you can select the next song to play.

I am using a Sprite with alpha 0 that overlays my whole tab (incl. the textFields) as a Listener for MOUSE_OVER and _OUT... I've checked by setting the alpha to something visible and it indeed covers my tab and follows it around as I move it (just making sure I'm not moving the tab without moving the hotspot). Also, I only create it once my cover art is loaded, ensuring that it will cover that too.

Now, when the tab is in the top position, everything is dandy. As soon as I move the tab to make space for the next tab, the textFields break my roll behaviour... just like that noob mistake of overlaying a sprite over the one that you're listening for MouseEvents on. But... the roll area is still on top of the field, I've set selectable and mouseEnabled to false on the textFields... nothing.

It is as if the mere fact of moving the whole tab now puts the textField on top of everything in my tab (whereas visually, it's still in its expected layer).

I'm using pixel fonts but tried it with system fonts, same thing... at my wits end here.

public function Tab(tune:Tune) {
    _tune = tune;
    mainSprite = new Sprite();
    addChild(mainSprite);
    drawBorder();
    createFormat();
    placeArtist();
    placeTitle();
    placeAlbum();
    coverArt();

}

private function placeButton():void {
    _button = new Sprite();
    _button.graphics.beginFill(0xFF000,0);
    _button.graphics.drawRect(0,0,229,40);
    _button.graphics.endFill();
    _button.addEventListener(MouseEvent.MOUSE_OVER, mouseListener);
    _button.addEventListener(MouseEvent.MOUSE_OUT, mouseListener);
    _button.buttonMode = true;
    mainSprite.addChild(_button);
}

private function mouseListener(event:MouseEvent):void {
        switch(event.type){
            case MouseEvent.MOUSE_OVER :
                hilite(true);
                break;
            case MouseEvent.MOUSE_OUT :
                hilite(false);
                break;
        }
}

private function createFormat():void {
    _format = new TextFormat();
    _format.font = "FFF Neostandard";
    _format.size = 8;
    _format.color = 0xFFFFFF;
}

private function placeArtist():void {
    var artist : TextField = new TextField();
    artist.selectable = false;
    artist.defaultTextFormat = _format;

    artist.x = 41;
    artist.y = 3;
    artist.width = 135;
    artist.text = _tune.artist;
    artist.mouseEnabled = false;
    mainSprite.addChild(artist);
}

private function placeTitle():void {
    var title : TextField = new TextField();
    title.selectable = false;
    title.defaultTextFormat = _format;

    title.x = 41;
    title.y = 14;
    title.width = 135;
    title.text = _tune.title;
    title.mouseEnabled = false;
    mainSprite.addChild(title);
}

private function placeAlbum():void {
    var album : TextField = new TextField();
    album.selectable = false;
    album.defaultTextFormat = _format;

    album.x = 41;
    album.y = 25;
    album.width = 135;
    album.text = _tune.album;
    album.mouseEnabled = false;
    mainSprite.addChild(album);
}

private function drawBorder():void {
    _border = new Sprite();
    _border.graphics.lineStyle(1, 0x545454);
    _border.graphics.drawRect (0,0,229,40);
    mainSprite.addChild(_border);
}

private function coverArt():void {
    _image = new Sprite();
    var imageLoader : Loader = new Loader();

    _loaderInfo = imageLoader.contentLoaderInfo;
    _loaderInfo.addEventListener(Event.COMPLETE, coverLoaded)

    var image:URLRequest = new URLRequest(_tune.coverArt);
    imageLoader.load(image);
    _image.x = 1.5;
    _image.y = 2;
    _image.addChild(imageLoader);
}

private function coverLoaded(event:Event):void {
    _loaderInfo.removeEventListener(Event.COMPLETE, coverLoaded);
    var scaling : Number = IMAGE_SIZE / _image.width;
    _image.scaleX = scaling;
    _image.scaleY = scaling;
    mainSprite.addChild (_image);
    placeButton();
}

public function hilite(state:Boolean):void{
    var col : ColorTransform = new ColorTransform();
    if(state){
        col.color = 0xFFFFFF;
    } else {
        col.color = 0x545454;
    }
    _border.transform.colorTransform =  col;
}

Answer 1

Fixed it. What was happening was that I didn't set the height of the textfield. That was overshooting the tab and hence lying over the previously instantiated tab, blocking MouseOver... don't even ask.