useHandCursor in Flex component

When I first started writing Flex applications, I needed to get the useHandCursor property to work. Many will find that settinguseHandCursor=true doesn’t really do anything. After doing a little research, I found a couple different ways for doing getting the hand cursor to work.

The first way is creating a custom hand yourself and use the CursorManager class to set a new cursor icon. Use the mouseOver and mouseOut Events to set and remove the new cursor using these two methods.

import mx.managers.CursorManager;
[Embed(source="/images/pointer.png")]
private var handCursorSymbol:Class;
private var _numCursorID:Number;
public function createPointer(event:Event):void{
_numCursorID = CursorManager.setCursor(handCursorSymbol);
}
public function destroyPointer(event:Event):void{
CursorManager.removeAllCursors();
}

After adding my new cursor to the screen, the positioning of the pointer is off a little. When I moused over the component, I found that when the cursor changed over to my new pointer that the pointer wasn’t even on the component. There is an offset attribute you can use to position your new cursor.

_numCursorID = CursorManager.setCursor(handCursorSymbol, 2.0,-8);

For more information on the CursorManager Class go to flex language reference.

If you don’t want to have to create your own hand icon, the second way to get a hand cursor working is to use a mouseOver Event.
mouseOver="event.target.onRelease=null;event.target.useHandCursor=true;"

I found this example over at Prismix Blog. Check it out to learn more about how it works.

The third and the easiest way to use change the cursor to the hand cursor, is just change a couple of properties.

useHandCursor="true"
buttonMode="true"

If the component has children also set mouseChildren="false"

Here are a couple of different ways you can turn on useHandCursor and how to create a custom cursor.

http://livedocs.adobe.com/flex/201/langref/flash/display/Sprite.html#useHandCursor

Hopefully this will save you some time.