css - 如何使用 GWT 复制 GMail 当前悬停的行标记？

Question

我只是想知道您将如何使用 GWT CellTable 复制 GMail 悬停的行标记：

我创建了这个类：

public class MarkerCell extends ImageResourceCell {

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, ImageResource value, SafeHtmlBuilder sb) {
        value = Images.INSTANCE.selectedRowMarker();
        super.render(context, value, sb);
    }
    
}


public class MarkerColumn<T> extends Column<T, ImageResource> {

    public MarkerColumn() {
        super(new MarkerCell());
    }

    @Override
    public ImageResource getValue(T object) {
        return Images.INSTANCE.selectedRowMarker();
    }

}

我以这种方式使用它：

MarkerColumn<GfsFile> marker = new MarkerColumn<GfsFile>();
marker.setSortable(false);
table.addColumn(marker);

排除应该隐藏/取消隐藏标记的悬停事件处理，结果并不像我预期的那样：

你会用什么方法来接近 GMail？

Answer 1

我会将行标记图像作为每一行的一部分嵌入，并附加一个将不透明度设置为 0 的样式。然后将一个 :hover 状态添加到将不透明度设置为 1 的行选择器类。诀窍是让 css 选择器正确。我认为单元格表使用表格行，所以它应该类似于

tr:hover .selectorImageStyle {opacity:1 }