Can't interact with children of an itemRenderer in Flex 4 Gumbo

Question

I thought this would be pretty easy but I'm running into all sorts of problems with this. I have an ItemRenderer with a an image and two labels. I want to assign separate mouse events to the image and two labels. It seems like the item renderer is treated like a single interactive piece and I haven't found a way to override that. I couldn't even disable the default rollover effect so I had to style the rollOverColor to match my background.

Can anyone provide a solution?

<s:DataGroup id="browserDataGroup" dataProvider="{model.userBoardList}"
                 verticalCenter="0" left="10" rollOverColor="0x424242"
                 itemRenderer="edu.xxxxx.components.board.BrowserItemRenderer">
<!--itemrenderer code below -->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:ns="library://ns.adobe.com/flex/mx"
        buttonMode="true" useHandCursor="true"
        mouseChildren="true">
    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
    </s:states>
    <s:layout>
    <s:VerticalLayout gap="2"/>
    </s:layout>
    <s:Group>       
    <ns:Image id="image" source="{data.thumbnail}"
              addedEffect="Fade" completeEffect="Fade" removedEffect="Fade"
              width="130" height="89" 
              horizontalCenter="0" verticalCenter="0"/>
    <s:Rect id="imageRect" width="130" height="89">
        <s:stroke>
            <s:SolidColorStroke color="0xFFFFFF" joints="miter" pixelHinting="true"/>
        </s:stroke>
    </s:Rect>
    </s:Group>
    <s:Label text="{data.title}" color="0xFFFFFF" fontWeight="bold"/>
    <s:Group>
        <s:layout>
        <s:HorizontalLayout gap="3"/>
        </s:layout>
        <s:Label text="Edit" color="0xFFFFFF" click="trace('edit');"
                 textDecoration.up="underline" textDecoration.over="none"/>
        <s:Label text="|" color="0xFFFFFF"/>
        <s:Label text="Delete" color="0xFFFFFF" click="trace('delete');"
                 textDecoration.up="underline" textDecoration.over="none"/>
    </s:Group>

</s:ItemRenderer>

Answer 1

Just in case this helps anyone else, turns out the solution was to use set autoDrawBackground="false" for the itemRenderer instance. That disables the drawing of the overlays. Then, I should have been using rollOver and rollOut for the individual children that I wanted to interact with. Rookie mistakes…you hate to see them.