Mouseout event in VBox

Question

I can't seem to detect a mouse event (MouseOut) on an
Accordion menu. I can do it on the TabBar but am not able to do it
on the children. I know I am missing something fundamental here.
The purpose is to make Accordion (id=locations) property
Visible=False when MouseOut occurs on the submenu. Any
enlightenment would be appreciated greatly.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas width="753" height="300"
verticalScrollPolicy="off" horizontalScrollPolicy="off" x="0" y="0"
>
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.controls.TabBar;
import mx.collections.ArrayCollection;
[Bindable]
public var STATE_ARRAY:ArrayCollection = new
ArrayCollection([
{label:"Home", data:"Home"},
{label:"Locations", data:"Locations"}
public function leavemenu(event:MouseEvent):void
locations.visible=false;
public function testIt(event:MouseEvent):void
if (event.target is Button)
{textarea2.text=textarea2.text + 1;
var index:int =
bar.getChildIndex(DisplayObject(event.target));
var tab:Button = Button(bar.getChildAt(index));
if (tab.label=="Home")
locations.visible=false;
if (tab.label=="Locations")
locations.visible=true;
locations.x=tab.x;
locations.y=bar.height+bar.y-2;
locations.height=locations.numChildren*21;
if (event.target is VBox)
textarea2.text=textarea2.text + 2;
]]>
</mx:Script>
<mx:Canvas x="478" y="93" width="275" height="404"
mouseOver="leavemenu(event)">
</mx:Canvas>
<mx:TabBar width="600" id="bar" x="0" y="72"
mouseOver="testIt(event)"
height="20">
<mx:dataProvider>
{STATE_ARRAY}
</mx:dataProvider>
</mx:TabBar>
<mx:Accordion width="150" id="locations"
visible="false"> <!--21 pixels height per line-->
<mx:VBox label="Bethel, CT" width="100%" height="100%"
mouseOver="testIt(event)">
</mx:VBox>
<mx:VBox label="Branford, CT" width="100%" height="100%"
mouseOver="leavemenu(event)">
</mx:VBox>
</mx:Accordion>
<mx:TextArea x="603" y="74" height="18" width="103"
id="searchbox"/>
<mx:Button x="707" y="74" label="Search" width="46"
height="18" fontFamily="Arial"/>
<mx:TextArea x="327" y="28" id="textarea2"/>
</mx:Canvas>
<mx:Image x="0" y="93" source="images/DSC02878.JPG" />
<mx:TextArea id="textarea1" width="150" x="92" y="546"
visible="true"/>
</mx:Application>

Answer 1

Hi,
The following example uses the vbox mouse wheel event to control the list box selected index, its just a simple test but it shows that vbox can accept the mousewheel event- one small caveat the vbox has to gain the mouse focus which requires it to be clicked on first in this example.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="appInit()">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
[Bindable] private var myData:ArrayCollection= new ArrayCollection([
{Key:1,state:'ACT',name:'Australian Capital Territory'},
{Key:2,state:'NSW',name:'New South Wales'},
{Key:3,state:'NT',name:'Northern Territory'},
{Key:4,state:'QLD',name:'Queensland'},
{Key:5,state:'SA',name:'South Australia'},
{Key:6,state:'TAS',name:'Tasmania'},
{Key:6,state:'WA',name:'Western Australia'},
{Key:7,state:'VIC',name:'Victoria'}]);
private function appInit(): void
myBox.addEventListener(MouseEvent.MOUSE_WHEEL,mouseScroller);
protected function button1_clickHandler(event:MouseEvent):void
if (lst.height==115) lst.height=300 else lst.height=115;
private function mouseScroller(e:MouseEvent): void
if (e.delta < 0 && lst.selectedIndex > 0) lst.selectedIndex -=1;
if (e.delta > 0 && lst.selectedIndex < myData.length) lst.selectedIndex +=1;
]]>
</fx:Script>
<s:List id="lst" x="113" y="77" width="236" height="115" dataProvider="{myData}" labelField="name"></s:List>
<s:Button x="156" y="48" label="Change Height" click="button1_clickHandler(event)"/>
<mx:VBox x="371" y="48" width="200" height="200" backgroundColor="#726E6E" id="myBox">
</mx:VBox>
</s:Application>