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

Posted 2023-05-07

技术标签:

【中文标题】悬停效果上的角剑道网格行【英文标题】：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';

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

【问题讨论】：

【参考方案1】：

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

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

EXAMPLE

【讨论】：

以上是关于悬停效果上的角剑道网格行的主要内容，如果未能解决你的问题，请参考以下文章