悬停效果上的角剑道网格行答案

【问题标题】：Angular Kendo Grid Row on hover effect悬停效果上的角剑道网格行
【发布时间】：2019-02-14 17:08:53
【问题描述】：

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

我尝试使用 [rowClass] 将 CSS 类 (<class>:hover) 应用到每一行，理论上可行，但不会应用样式。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：