我将选择的.k状态更改为其他颜色,效果很好。但是,当我将鼠标悬停在所选行上时,悬停颜色为蓝色。我已经尝试过
.k-grid tr:hover{
background:transparent;
}
并且对于未选择的行有效,但不适用于选定的行。本质上,我需要删除所选行上的悬停效果,无法弄清它]
$("#grid").kendoGrid({
columns: [{
field: "name"
},
{
field: "age"
}
],
dataSource: [{
name: "Jane Doe",
age: 30
},
{
name: "John Doe",
age: 33
}
],
selectable: "row"
});
.k-grid .k-state-selected {
background: #ec971f;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="grid"></div>
.k-grid tr:hover
由于CSS特殊性规则而无效。换句话说,.k-grid .k-state-selected
比.k-grid tr:hover
更具体。
.k-grid .k-state-selected:hover
应该为您工作。
尝试:
$("#grid").kendoGrid({
columns: [{
field: "name"
},
{
field: "age"
}
],
dataSource: [{
name: "Jane Doe",
age: 30
},
{
name: "John Doe",
age: 33
}
],
selectable: "row"
});
.k-grid .k-state-selected {
background: #ec971f;
}
.k-grid .k-state-selected:hover {
background: transparent!important;
color:#000;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="grid"></div>