CODEWITHSUNDEEP
gwtlabelmouse-cursor
Jimmy
Jimmy

Reputation: 73

How can set cursor: hand with GWT: label

I'd like to set a mouse listener to my Label so that I can change the cursor to a HAND_CURSOR when the user places their mouse over a label.

 <g:Label text="Overview" styleName="left_menu_title" ui:field="lb_overview"/>

I tried to set style css "cursor: hand;" for this Label, but when run, all attribute cursor were replaced.

Do you have any suggestion?

Upvotes: 7

Views: 14162

Answers (4)

naddame
naddame

Reputation: 139

You have only to do the following :

.left_menu_title {
 cursor: pointer;
}

If you want a code to do other thing than set cursor to pointer : 

import com.google.gwt.dom.client.Style.Cursor;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.ui.Label;

...
...
...


 final Label testLabel = new Label();
 testLabel.addMouseOverHandler(new MouseOverHandler() {     
        @Override
        public void onMouseOver(MouseOverEvent event) {
             testLabel.getElement().getStyle().setCursor(Cursor.POINTER);   

            //TODO: any thing you want      
        }
    });

Upvotes: 2

krupal
krupal

Reputation: 21

where to this one..
Label testLabel = new Label("Text Goes Here);
testLabel.getElement().getStyle().setCursor(Cursor.POINTER); 

in my code provided below..

 {
   xtype:'label',
   text:'testLabel',
   id:'cancel1',
   Label testLabel = new Label("Text Goes Here);  
   testLabel.getElement().getStyle().setCursor(Cursor.POINTER); 
   listeners : {
   render : function(d) {
   d.getEl().on('click', function(){ this.fireEvent('click', d); }, d);
}
}

}

Upvotes: 2

TheGrandPackard
TheGrandPackard

Reputation: 621

The answer provided by user1557828 will in fact cause the Label to show the cursor when the mouse is over it, but there is a simpler way to achieve the same result:

Label testLabel = new Label("Text Goes Here);
testLabel.getElement().getStyle().setCursor(Cursor.POINTER);

This will set the cursor at instantiation and the style will persist. It is not necessary to re-apply the style each time the mouse moves over the label.

Upvotes: 20

Chris Cashwell
Chris Cashwell

Reputation: 22899

The proper way to do it would be:

.left_menu_title {
   cursor: pointer;
}

and 

<g:Label text="Overview" styleName="{style.left_menu_title}" ui:field="lb_overview"/>

Upvotes: 2

Related Questions