1

我正在尝试在使用 UIBinder 的 GWT 中使用单个 .png 作为具有悬停效果（a la this）的按钮，但我遇到了困难。

这是我的 ui.xml 文件：

<ui:with field="functionResources" type="myapp.client.application.functions.FunctionResources"/>

<ui:style>

    .clickableIcon{
        cursor: hand;
        cursor: pointer;            
    }

    .clickableIcon:hover{
        cursor: hand;
        cursor: pointer;                        
        background-position: 0 -76px;
        border: 1px solid blue;
    }
</ui:style>

<g:VerticalPanel ui:field="buttonPanel">
    <g:Image ui:field="survivalIcon" debugId="survivalIcon" width="76px" resource="{functionResources.survivalIcon}" styleName="{style.clickableIcon}"/>

</g:VerticalPanel>

我能够将 .png 捆绑并显示在浏览器中就好了。但是，我的 :hover CSS 没有按预期工作。当我悬停时，它确实会在图像周围显示一个蓝色边框，所以我知道 CSS 正在工作，但图像不会改变。

看起来捆绑的图像像0 0元素样式本身一样覆盖了背景位置属性，这否定了我的类级样式。有没有办法告诉 GWT 不要为捆绑的 ImageResource 设置背景位置？还是有更好的方法来完全做到这一点？

谢谢。

4

1 回答 1

2

从我在网上找到的糟糕文档中，您无法覆盖g:Image的背景位置属性。

另一种方法是使用 GWT 的 sprite 系统生成背景图像，您可以在其上覆盖background-position属性。

例如，

<div class="{functionResources.style.survivalIcon} {style.clickableIcon}"/>

哪里FunctionResources会有：

public interface FunctionResources extends ClientBundle {
    public interface Style extends CssResource {
        String survivalIcon();
    }

    Style style();
    ImageResource survivalIconImage();
}

并且，在一个名为 的单独 CSS 文件中style.css，您将拥有：

@sprite .survivalIcon {
    gwt-image: "survivalIconImage";
}

这将生成一个 div，其中包含您想要的背景图像。您将能够随意修改 div 的background-position属性。

当然，这种方法可以应用于任何支持 background-image 的 DOM 元素。

于 2012-09-07T17:58:47.107 回答