如何从使用引导程序的剑道网格行中删除悬停效果答案

【问题标题】：How to remove hover effect from kendo grid row that is using bootstrap如何从使用引导程序的剑道网格行中删除悬停效果
【发布时间】：2020-04-08 05:45:24
【问题描述】：

前几天我问了一个关于删除选定行上的悬停影响并得到正确答案的问题，现在我遇到了一个问题，因为我正在使用剑道引导 css，现在删除选定行上的悬停效果现在是不工作，我尝试了几种不同的方法来改变悬停效果以保持与 k-state-selected 相同的颜色并且没有工作..

$("#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;
}

.k-grid .table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background: #ec971f !important;
}

.k-grid .table-hover tbody .k-state-selected:hover {
  background: #ec971f !important;
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<div id="grid"></div>

【问题讨论】：

虽然不是一个好方法，但如果你是表，就不会有任何指针事件。你可以简单地做
。这将消除对悬停的影响。但是，如果您想更改 CSS，可以查看我的答案。

标签： css twitter-bootstrap hover kendo-grid tr

【解决方案1】：

$("#grid").kendoGrid({
  columns: [{
      field: "name"
    },
    {
      field: "age"
    }
  ],
  dataSource: [{
      name: "Jane Doe",
      age: 30
    },
    {
      name: "John Doe",
      age: 33
    },
    {
      name: "Jane Doe",
      age: 30
    },
    {
      name: "Jane Doe",
      age: 30
    },
  ],
  selectable: "row"
});

.k-grid tr:hover {
    background-color: transparent !important;
}

.k-grid tr.k-alt:hover {
  background-color: #f5f5f5 !important;
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<div id="grid"></div>

【讨论】：