How to show hand cursor when mouse is over List component?

Question

I am aware that the follow will show a hand cursor:

component.mouseChildren = true;
component.useHandCursor = true;
component.buttonMode = true;

When I do the above on a List component, the hand button is shown and the whole component loses it's interactivity (Hand cursor is shown even on scrollbars).

So how can I show the hand cursor only when rolling over the list items?

Answer 1

Missread your full test, below is just how to show hand cursor on any Flex control.

I would suggest that you make an custom itemRenderer and for each renderer you use these controls, that will make it show only when you are over the itemRenderer and it will not be applicable for the whole List control...

---

Check out this blog post I wrote about showing hand cursors on any Flex control.

Showing hand cursor on any Flex Control

Sometimes useHandCursor=true buttonMode=true is enough, but for some controls you have to use mouseChildren=false

Examples:

<mx:Button label="Button" useHandCursor="true" buttonMode="true" />

<mx:Label text="Label" useHandCursor="true" buttonMode="true" mouseChildren="false"/>

Answer 2

I had the same issue with getting a hand cursor over a datagrid. I assume the solution will be the same for lists.

The way I found to get a hand cursor while also having interactivity with items in my datagrid was to use the itemRollOver and itemRollOut events of DataGrid (List has them too):

[Embed("../assets/images/cursors/hand_cursor.png")]
private var handCursor:Class;

protected function grid_itemRollOver():void {
    cursorManager.setCursor(handCursor);
}

protected function grid_itemRollOut():void {
    cursorManager.removeAllCursors();
}

Answer 3

function meOver(evt:Event):void{ evt.target.useHandCursor = true; }

myList.addEventListener(MouseEvent.MOUSE_OVER, meOver);