选中时更改GWT网格的行鼠标悬停颜色

Question

When a button is pressed, i change the background of a few rows in a Grid component, I've achieved it so far, but, when the user mouses over the selected row, it does not show the color that is set, how to change the color of the mouse over item to match the selected item color? Code here so far.

for(int i=0;i<grid.getStore().getCount();i++){
    Element row = (Element) grid.getView().getRow(i);
    row.getStyle().setProperty("backgroundColor", "#FFFFFF");
}
for(int item:items){
    Element row = (Element) grid.getView().getRow(item);
    row.getStyle().setProperty("backgroundColor", "#DFE8F6");
}

Changed as per the answer.

for(int i=0;i<grid.getStore().getCount();i++){
    Element row = (Element) grid.getView().getRow(i);
    row.getStyle().setProperty("backgroundColor", "#FFFFFF");
    row.removeClassName("ps-grid-selected-row");                    
}
Element row = (Element) grid.getView().getRow(indexItem);
row.getStyle().setProperty("backgroundColor", "#DFE8F6");
//              row.getStyle().setProperty("hover", "#DFE8F6");
row.addClassName("ps-grid-selected-row");

Answer 1

The easiest way to add a mouse over color to the row is through CSS. In your CSS file, add an entry like this:

.selected-row:hover {
  background-color: #DFE8F6;
}

And back in your code, instead of setting the background color just add the CSS class:

for(int i=0;i<grid.getStore().getCount();i++){
  Element row = (Element) grid.getView().getRow(i);
  row.removeClassName( "selected-row" );
}
for(int item:items){
  Element row = (Element) grid.getView().getRow(item);
  row.addClassName( "selected-row" );
}

When you select the row, just add the selected-row classname and when it's not selected just remove the classname. The CSS specifies that when the user hovers over the class selected-row , it will use the #DFE8F6 background color.