1

UIBinderを使用してGWTでホバー効果（a la this ）を持つボタンとして単一の.pngを使用しようとしていますが、苦労しています。

これが私の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をバンドルしてブラウザに表示することができます。ただし、：hoverCSSが期待どおりに機能していません。実際、ホバーすると画像の周囲に青い境界線が表示されるので、CSSが機能していることはわかりますが、画像は変更されません。

バンドルされた画像は、要素スタイル自体のようにbackground-positionプロパティをオーバーライドしているように見えます0 0。これにより、クラスレベルのスタイルが無効になります。バンドルされたImageResourceのbackground-positionを設定しないようにGWTに指示する方法はありますか？それとも、これを完全に行うためのより良い方法はありますか？

ありがとう。

4

1 に答える 1

2

From the poor documentation I've found on the web, you cannot override g:Image's background-position property.

An alternative would be to use GWT's sprite system to generate a background-image, on which you will be able to override the background-position property.

For example,

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

where FunctionResources would have:

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

    Style style();
    ImageResource survivalIconImage();
}

and, in a separate CSS file named style.css, you'd have:

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

This will generate a div, with the background-image you wanted. You will be able to modify the div's background-position property at will.

Of course, this method can be applied to any DOM element that supports background-image.

于 2012-09-07T17:58:47.107 に答える