对于gwt-UiBinder，悬停在2个堆叠组件上

Question

我想在图像顶部创建一个带有按钮的UiBinder功能。

通常，图像不透明度=1，按钮不透明度=0.1。鼠标悬停，图像不透明度=0.1，按钮不透明度=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">rn" + 
"  <i class="fa fa-user-large fa-stack-1x" aria-hidden="true"></i>rn" + 
"</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> 

图像悬停按预期工作。鼠标悬停时，不透明度变为0.1。但是按钮根本不会悬停。以下出现问题。

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

对于UiFinder来说，从css的翻译似乎并不是那么简单。

感谢

Answer 1

如果您正确使用UI绑定器，它将附加您定义的样式。

您是否在静态HTML页面中测试过它，没有GWT，只有HTML和CSS？

如果有效的话。。。

使用浏览器的开发工具(Chrome、Firefox(，检查图像按钮元素并查看其附带的类/样式

您应该在那里看到.imgButton类。

但是它的一些样式，例如悬停时的不透明度，可能会被删除，因为您在那里看到的另一个类(例如，GWT自己的样式(具有更高的优先级。

在这种情况下，您可以尝试将您的样式标记为!import，以使其优先于其他样式。例如

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

或者你可能需要更具体一点：例如

.imgButton:hover { ...