Vaadin-grid: Hover style in vaadin grid row

[sudipta1411]

Hello,
I am trying to achieve row-hover styling in vaadin-grid, where on hovering over a row, its style is changed.
My code is

<dom-module id="grid-styles" theme-for="vaadin-grid">
    <template>
        <style>
             [part~="body-cell"] :hover {
                 background-color: beige;
            }   
        </style>
    </template>
</dom-module>

But this code is not working. Can someone please help. Also there is no documentation on it.

PS. In previous versions this was done using --vaadin-grid-body-row-hover-cell.

[christophe-g]

I guess you'd have to do :

[part~="cell"]:hover ::slotted(vaadin-grid-cell-content) {
      background-color: beige;
      }

I use this for showing cells content on row hover:

    [part~="row"] .cell-show-hover {
      opacity: 0;
    }

    [part~="row"]:hover .cell-show-hover {
      opacity: 1;
    }

and then cell-class-name-generator such as

 gridClassNameGenerator: {
        type:Function, 
        value: function() {
          return function(column, row) {
            return column.classList.value;
          };
        }

to pass on class to generated markup

 <vaadin-grid-column width="40px" flex-grow="0" class="cell-show-hover">
        <template>
          <paper-icon-button  icon="more-vert"  alt="menu" on-tap="activateContextMenu"></paper-icon-button>
        </template>
      </vaadin-grid-column>

[sudipta1411]

Ok, The following code is working

[part~="row"]:hover > [part~="body-cell"]{
    background-color: beige;
 }