Question

我们有一个页面使用jQuery来切换名为＆＃39; show＆＃39;的属性的值。在页面上的元素之间＆＃39; on＆＃39;和＆＃39;关闭＆＃39;

我们有一个CSS选择器，可以在值为＆＃39; on时使用该属性进行匹配。与＆＃39;：悬停＆＃39;伪类，例如;

.shiftTable[hover="on"]:hover {background-color: red; font-weight: bold;}

目的是控制何时将悬停应用于元素。

这段代码已经投入生产一段时间了（从我盯着〜2年前开始。）IT正在开发Chrome，Safari，Firefox，IE和Edge。

从Chrome 62.0.3202.75开始，我们在内部注意到没有应用悬停效果。我阅读了发行说明，并没有看到任何可以直接连接到我们的问题的内容。我们已经验证了此问题也发生在Chrome 62.0.3202.94中。 Firefox和IE继续按预期运行。

这是fiddle，可以再现我们所看到的内容。

在新版Chrome中，点击“停留在＆＃39;按住鼠标悬停在某些标记＆＃39;目标内的文字什么都不做。在例如Firefox，相同的操作导致悬停样式应用于元素。

有趣的是，如果我在Chrome开发者工具中启用：悬停选择器，即使再次禁用选择器，鼠标悬停也会按预期开始工作。

我尝试的事情：

重命名＆＃39; hover＆＃39;属于＆＃39;数据悬停＆＃39; - 我的理解是自定义归因应该以＆＃39;数据为前缀 - ＆＃39;，我认为Chrome可能已经开始严格执行此操作。
创建.hover：hover类并使用jQuery的addClass方法将.hover类添加到元素中。

我完全愿意相信我们做错了什么，但我不清楚这可能是什么。

编辑：我能够验证强制重排是否解决了我的问题，但也非常昂贵。现在我已经知道问题是什么，我已经能够在SO和其他地方找到其他类似问题。解决方案似乎都是各种类型的黑客 - 添加和删除空元素，改变不透明度或可见性等。

为了稍微调整我的问题的焦点，有没有更好的（更兼容/标准兼容）方式来实现同样的效果，而不必“欺骗”＃39;通过进行不相关的更改，Chrome会注意到更改的变化？