如何在GWT中设置锚点样式？

Question

How can I add style for Anchor in GWT using UIBinder? I have following piece of code in UiBinder template XML:

<g:Anchor ui:field="forgotPassLink">Forgot password?</g:Anchor>

I know that .gwt-Anchor { } is used for styling this widget, but still no idea how to style hover effects. In normal CSS it would go like this:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Do I have to handle this with BlurEvent and FocusEvent handlers on Anchor? If so ...that is boilerplate code..

Answer 1

Use the same CSS pseudo-classes with the gwt-Anchor class:

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

You can also use a.gwt-Anchor but it isn't strictly necessary.

Answer 2

If you are using uibinder with the gwt HyperLink, it can be done like this:

<ui:style>
.mystyle a:link {
color:#3F3F3F; 
text-decoration:none;
}   
</ui:style>

<g:FlowPanel>
    <g:Hyperlink styleName='{style.mystyle}'/>
</g:FlowPanel>

Answer 3

Define your style like this:

<ui:style>
  .menuItem a:link {color: white;}
  .menuItem a:visited {color: white;}
  .menuItem a:hover {color: white;}
  .menuItem a:active {color: white;}
</ui:style>

And use it like this:

<g:Hyperlink styleName="{style.menuItem}" targetHistoryToken="home">Home</g:Hyperlink>

Answer 4

Does this work (using UIBinder style names) ?

<ui:style>
  .a:link { color: #FF0000; }
  .a:visited { color: #00FF00; }
  .a:hover { color: #FF00FF; }
  .a:active { color: #000FF; }
</ui:style>
<g:HTMLPanel>
  <g:Anchor ui:field="forgotPassLink" styleName="{style.a}">Forgot password?</g:Anchor>
</g:HTMLPanel>