如何删除选定行上的悬停效果？答案

【问题标题】：How to remove hover effect on selected row?如何删除选定行上的悬停效果？
【发布时间】：2019-12-12 16:52:49
【问题描述】：

我将 .k-state-selected 更改为不同的颜色，效果很好。但是，当我将鼠标悬停在所选行上时，悬停颜色为蓝色。我试过了

.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>

【问题讨论】：

检查我的答案！最好的问候。

标签： css kendo-ui kendo-grid

【解决方案1】：

试试看：

$("#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:  #ec971f!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>

【讨论】：

【解决方案2】：

.k-grid tr:hover 不起作用，因为 CSS 特殊性的规则。换句话说，.k-grid .k-state-selected 比 .k-grid tr:hover 更具体。

.k-grid .k-state-selected:hover 应该适合你。

Example

【讨论】：