如何在不修改剑道 css 的情况下关闭剑道网格（.k-grid tr:hover）的 css:hover？答案

【问题标题】：How to turn off css:hover for kendo grid (.k-grid tr:hover) without modifying the kendo css?如何在不修改剑道 css 的情况下关闭剑道网格（.k-grid tr:hover）的 css:hover？
【发布时间】：2019-07-26 15:12:38
【问题描述】：

我在 Cordova 应用上有一个剑道网格。在网格上，由于剑道 css 中的 css 规则“k-grid tr:hover”，滚动是锯齿状的。如果我从开发人员工具中禁用此规则，则滚动很顺畅。有什么办法可以禁用此悬停规则？

我不想覆盖悬停行为。我想禁用它。

编辑：问题是由于悬停在网格上的滚动不流畅。滚动在滑动触摸结束后开始，但它应该使用 touchmove 移动。这会导致滚动出现锯齿状。删除悬停规则可以解决这个问题并使滚动更流畅。

如有必要，请要求进一步澄清。

【问题讨论】：

你有什么不想修改剑道css的原因吗？
我的领导不允许我这样做.. *-_- ，否则我可以删除该规则。但是修改外部api应该是不好的做法。
我能理解领导的观点。但是，我们从一开始就使用了使用 Telerik 为此目的提供的在线工具构建的定制剑道 CSS，以便我们与内部设计标准保持一致。

标签： javascript css cordova hover kendo-grid

【解决方案1】：

您可以在 DOM 元素上使用 pointer-events: none 属性。 https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

.k-grid tr {
    pointer-events: none;
}

使用此属性，该元素上的悬停事件将被完全忽略。

【讨论】：

我试过了，但我在表格行中有一个复选框和一个可点击的项目。这些元素点击事件也不会触发。

【解决方案2】：

我已经通过禁用悬停然后复制 tr even 背景颜色来“解决”它：

.k-grid tr:hover {
    background: none;
}

.k-grid tr.k-alt:hover {
    background: none;
}

.k-grid tr.k-alt:nth-child(even) {
    background-color: #f5f5f5;
}

当然你可以玩颜色

【讨论】：

这是正确的方法。您不会丢失任何悬停 DOM 事件。请记住，您的 .k-alt 行颜色可能不是 #f5f5f5，具体取决于主题。

【解决方案3】：

我从 Gabriel 的回答中得到了提示，但我将指针事件 none 应用于 .k-grid tr 中的 td 元素。但这只是一个临时修复，因为这消除了将指针事件添加到那些 td 元素的可能性。我仍在寻找更好的选择。

【讨论】：