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

时间:2017-03-28 13:16:47

标签: css asp.net-mvc telerik grid hover

我在这里和telerik论坛上尝试了很多问题和答案,但没有一个因某种原因而起作用。我有一个网格,我想按照自己的意愿和我管理的一些东西,但我没有设置选定的行悬停背景颜色。

任何想法?

这是网格:

@(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;
}

1 个答案:

答案 0 :(得分:1)

对我来说很好。

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