Angular Kendo Grid Row悬停效果

Question

当用户将鼠标悬停在行上时，我想更改行的背景（有用的帮助，行跟踪）。

我尝试使用<class>:hover将CSS类（[rowClass]）应用到每一行，这在理论上是有效的，但样式不会被应用。

<kendo-grid [rowClass]="rowCallback" [data]="gridData" [height]="410"> ...

export class AppComponent {
    public gridData: any[] = products;

    rowCallback(context) {
      return 'styler';
    }
}

Stackblitz：https://stackblitz.com/edit/grid-hover-color-test

Answer 1

最直接的方法是通过CSS定位悬停的行并添加所需的样式，例如：

encapsulation: ViewEncapsulation.None,
styles: [`
  .k-grid tr:hover {
    background-color: yellow;
  }
`]

EXAMPLE