如何在 GWT 中设置锚的样式？答案

【问题标题】：How to style Anchor in GWT?如何在 GWT 中设置锚的样式？
【发布时间】：2014-10-12 08:13:00
【问题描述】：

如何使用 UIBinder 在 GWT 中为 Anchor 添加样式？我在 UiBinder 模板 XML 中有以下代码：

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

我知道 .gwt-Anchor { } 用于设置此小部件的样式，但仍然不知道如何设置悬停效果的样式。在普通的 CSS 中，它会是这样的：

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 */

我是否必须使用 Anchor 上的 BlurEvent 和 FocusEvent 处理程序来处理这个问题？如果是这样......那就是样板代码......

【问题讨论】：

不要忘记设置Anchor href 属性至少类似于'javascript:;' 以使其被浏览器视为链接。
实际上，IIRC，GWT 会为您做到这一点（当然，除非您通过 ctor 或其他方式明确设置 href 属性）。

标签： css gwt anchor

【解决方案1】：

使用与 gwt-Anchor 类相同的 CSS 伪类：

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

您也可以使用a.gwt-Anchor，但这不是绝对必要的。

【讨论】：

【解决方案2】：

如果您使用带有 gwt HyperLink 的 uibinder，可以这样完成：

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

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

【讨论】：

【解决方案3】：

这是否有效（使用 UIBinder 样式名称）？

<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>

【讨论】：

【解决方案4】：

这样定义你的风格：

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

并像这样使用它：

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

【讨论】：