在Kendo Ui Grid中为主行设置白色悬停背景并为明细设置不同的悬停颜色

Question

我需要将主行的悬停背景设置为白色/透明，而将蓝色悬停在子网格中的行上。

如何做到这一点？ 我对Kendo grid和CSS还是陌生的，因此仍然不了解可以在此处应用的样式。

需要在悬停上实现以下效果：

请在下面找到我的代码：

var columns = [{ "Code": "COL1", "Description": "Item1" }, { "Code": "COL2", "Description": "Item2" }, { "Code": "COL3", "Description": "Item3" }];

var gridData = [{Code: "Code0",ColCode: "COL1",Description: "Desc 0",D5: 100,D3: 50,D4: 60,D1: 12345,D2: 1234},
    {Code: "Code1",ColCode: "COL1",Description: "Desc 1",D5: 101,D3: 51,D4: 61,D1: 12346,D2: 1234},
    {Code: "Code2",ColCode: "COL1",Description: "Desc 2",D5: 102,D3: 52,D4: 62,D1: 12347,D2: 1234},
    {Code: "Code4",ColCode: "COL2",Description: "Desc 0",D5: 104,D3: 54,D4: 64,D1: 12349,D2: 1234},
    {Code: "Code3",ColCode: "COL2",Description: "Desc 1",D5: 103,D3: 53,D4: 63,D1: 12348,D2: 1234},
    {Code: "Code0",ColCode: "COL2",Description: "Desc 2",D5: 105,D3: 55,D4: 65,D1: 12350,D2: 1234},
    {Code: "Code1",ColCode: "COL3",Description: "Desc 0",D5: 106,D3: 56,D4: 66,D1: 12351,D2: 1234},
    {Code: "Code2",ColCode: "COL3",Description: "Desc 1",D5: 107,D3: 57,D4: 67,D1: 12352,D2: 1234},
    {Code: "Code3",ColCode: "COL3",Description: "Desc 2",D5: 108,D3: 58,D4: 68,D1: 12353,D2: 1234},
    ];


$("#dataDiv").kendoGrid({
            dataSource: columns,
            columns: [
                    { field: "Description", title: " " },
                    { field: "D1", width : 110},
                    { field: "D2", width: 110 },
                    { field: "D3", width: 110 },
                    { field: "D4", width: 110 },
                    { field: "D5", width: 110 }
            ],
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            resizable: false
        });

        function detailInit(e) {

            var gridDataSource = new kendo.data.DataSource({
                data: gridData,
                type: "odata",
                serverPaging: false,
                serverSorting: false,
                pageSize: 20,
                filter: { field: "ColCode", operator: "eq", value: e.data.Code }
            });


            $("<div />").appendTo(e.detailCell).kendoGrid({
                dataSource: gridDataSource,
                scrollable: true,
                sortable: true,
                resizable: true,
                columns: [
                    { field: "Description", title: " " },
                    { field: "D1", width : 110},
                    { field: "D2", width: 110 },
                    { field: "D3", width: 110 },
                    { field: "D4", width: 110 },
                    { field: "D5", width: 110 }
                ],
                height : 180
            });
        }

Answer 1

您需要的CSS：

.k-master-row:hover {
  background-color: transparent !important;
}
.k-detail-row .k-grid tbody tr:hover {                   
  background-color: green !important;                                              
}  

一个有效的例子