telerik asp.net mvc grid - 如何在悬停时设置选定行的样式

Question

我在这里和 telerik 论坛上尝试了很多问题和答案，但 none 出于某种原因工作。我有一个网格，我想按照自己的意愿设置样式和一些我管理的东西，但是我无法设置选定的行悬停背景颜色。

有什么想法吗？

这是网格：

@(Html.Kendo().Grid < APDashboard.Models.OrderViewModel > ()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.Freight).Title("מספר ספינה");
        columns.Bound(p => p.OrderDate).Title("תאריך הזמנה").Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName).Title("שם משלוח");
        columns.Bound(p => p.ShipCity).Title("עיר משלוח");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new {
        style = "height:550px;"
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
    .Events(events => events.DataBound("dataBound"))
)

这是我的样式：

我在下面标记了我为悬停所做的尝试

.k-i-expand:before{
    content: "\e007"
}
.k-i-collapse:before{
    content: "\e002"
}

.k-grid{
    font-family: Arial;
    font-size: 13px;
}
.k-grid td{
    color: #1e1e1e;
}
.k-grid tr:hover{
    background-color: #e0f3f7;
}
.k-grid-header .k-header{
    background-color: #d8dcdf;
}
.k-grid-header .k-header .k-link{
    color: #1e1e1e;
}
.k-grid .k-state-selected{
    background-color: #bce8f3 !important;
}

/* ================================== */
/* Here is what I tried for the hover */
/* ================================== */
.k-grid .k-state-selected:hover {
    background-color: #bce8f3 !important;
}

Answer 1

对我来说很好用。

.k-state-selected:hover td { background-color: red !important; }

telerik asp.net mvc grid - 如何在悬停时设置选定行的样式

telerik asp.net mvc grid - how to style selected row on hover

css

asp.net-mvc

grid

telerik

hover