7

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?

5
  • Do you mean css "cursor:pointer"?
    – a.b
    Commented Dec 19, 2011 at 1:32
  • I tried "cursor: point" and "cursor: hand" but it was still replaced
    – Jimmy
    Commented Dec 19, 2011 at 1:54
  • 1
    add cursor: pointer !important; to force your CSS style if something else is overwriting it.
    – Strelok
    Commented Dec 19, 2011 at 3:03
  • That's because there is no such cursor like point or hand defined in the CSS standard. The correct term to use is pointer, as Chris showed in his answer. You can see a list of valid CSS cursor values here: w3schools.com/cssref/pr_class_cursor.asp
    – a.b
    Commented Dec 19, 2011 at 7:29
  • Thanks Strelok and Abdullah, I changed css to cursor: pointer !important; and it worked.
    – Jimmy
    Commented Dec 19, 2011 at 11:57

4 Answers 4

20

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.

2

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"/>
4
  • As I said all attribute of cursor was replaced. Even "cursor: point;" "cursor: hand;"
    – Jimmy
    Commented Dec 19, 2011 at 1:45
  • added label styling rule. You weren't declaring it right for the label. Commented Dec 19, 2011 at 11:23
  • 1
    You should probably use addStylesNames rather than styleName, but that's independent from the issue discussed here; just a FYI. Commented Dec 19, 2011 at 11:24
  • Thanks guys, I fixed it by using "cursor: pointer !important;"
    – Jimmy
    Commented Dec 19, 2011 at 12:00
2
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);
}
}

}
1
  • i have tried this in my code but it is not working plz give me the appropriate answer where to put it in my code...
    – krupal
    Commented Oct 1, 2012 at 7:01
2

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      
        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.