Ok, so mouseOver and RollOver, and their respective outs work great as long as your mouse is actually over the item, or one of it's children. My problem is that I may have another UI component "between" my mouse and the item I want to process the mouse/rollover(maybe a button that is on top of a canvas, but is not a child of the canvas). The mouse is still over the component, there's just something else that it's over at the same time.

Any tips or help how to deal with this? Let me know if I'm not being clear enough.

Here is a simplified code example detailing my question copy/paste that into your flex/flash builder and you'll see what I mean:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="226" 
                creationComplete="ccInit()">
    <mx:Script>
        <![CDATA[
            private function ccInit():void{
                myCanv.addEventListener(MouseEvent.ROLL_OVER,handleRollOver);
            }
            private function handleRollOver(evt:MouseEvent):void{
                myCanv.setStyle("backgroundAlpha",1);
                myCanv.addEventListener(MouseEvent.ROLL_OUT,handleRollOut);
            }
            private function handleRollOut(evt:MouseEvent):void{
                myCanv.setStyle("backgroundAlpha",0);
                myCanv.removeEventListener(MouseEvent.ROLL_OUT,handleRollOut);
            }
        ]]>
    </mx:Script>

    <mx:Canvas id="myCanv" x="10" y="10" width="480" height="200" borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF" backgroundAlpha="0">

    </mx:Canvas>
    <mx:Button x="90" y="50" label="Button" width="327" height="100"/>  
</mx:Application>