For gwt UiBinder, hover effect on 2 stacking components

Question

I would like to create a UiBinder feature with a button on top of an image.

Normally, image opacity=1, button opacity=0.1. MouseOver, image opacity=0.1, button opacity=1

ImageBinder.java

public class ImageBinder extends Composite {
private static ImageBinderUiBinder uiBinder = GWT.create(ImageBinderUiBinder.class);
interface ImageBinderUiBinder extends UiBinder<Widget, ImageBinder> {
}
@UiField
Image image;
@UiField
Button button;

public ImageBinder() {
    initWidget(uiBinder.createAndBindUi(this));
    button.setHTML("<span class=\"fa-stack fa-lg\">\r\n" + 
            "  <i class=\"fa fa-user-large fa-stack-1x\" aria-hidden=\"true\"></i>\r\n" + 
            "</span>");
}
}

ImageBinder.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>

.image {
    width:400px;
    opacity: 1;
    height:400px;
}
.image:hover{
    opacity: 0.1;
}

.image:hover .imgButton{  <------This line does not work as expected
    opacity: 1; 
}

.imgButton {
display: block;
width: 50px;
height: 50px;
padding: 0px 0px !important;
background: red !important;
opacity: 0.1;
}
</ui:style>
<g:HTMLPanel>
<div class="container">
    <g:Image addStyleNames='{style.image}' ui:field="image" url="https://url/image.jpg></g:Image>
    <div class="middle">
        <g:Button ui:field="button" addStyleNames='{style.imgButton}'></g:Button>
    </div>
</div>  
</g:HTMLPanel>
</ui:UiBinder> 

The image hover works as expected. The opacity becomes 0.1 when mouse over. But the button does not hover at all. There is a problem for the following.

image:hover .imgButton{  <------This line does not work as expected
    opacity: 1; 
} 

It seems that the translation from css is not that simple for UiBinder.

Thanks

Answer 1

If you are using UI binder correctly it will attach the styles that you define.

Have you tested it in a static HTML page, no GWT, just HTML and CSS?

If that works...

Using your browser's development tools (Chrome, Firefox), inspect the image button element and look at the classes/styles attached to it.

You should see the .imgButton class there.

But some of its styles, such as the opacity on hover, may be struck out because there is another class that you see there (e.g. from GWT's own styling) that has a higher priority.

In this situation you can try marking your style as !import to give it priority over other styles. e.g.

image:hover .imgButton {
    opacity: 1  !important;
} 

Or perhaps you need to be more specific: e.g.

.imgButton:hover { ...