为什么'；t css dataattribute选择悬停在把手模板内的chrome中响应

我想突出显示红色悬停表中特定列中的文本

我正在选择数据属性为“data highlight”的单元格，如下所示：

[data-highlight]:hover {
  color:red;
  }

在您尝试在handlebarsjs数据模板中执行此操作之前，这一切都很正常

在IE中工作，但在chrome中不工作

我在JSFIDLE中有一个例子：

当您将鼠标悬停在IE中“职务”列中的项目上时，它们将变为红色。这在chrome中不会发生

---

有人能解释原因并提出解决方案吗？

这似乎是chrome中的一个错误，使用

：hover

选择器和

td[attr]

选择器组合使用不起作用

下面是重现该错误的最小示例：

---

该示例还有一些解决方法：使用适当的属性将内容包装在

div

中，或者使用不同的选择器，例如类选择器。

事实上，这是chrome中的一个bug

您可以通过在以下内容之前添加此css来解决此问题：

[data-highlight] {
    cursor:default;
}

查看您的固定样本：

---

嗯。。。从第一眼看，它应该被捡起来。看起来像，但如果你试一下，它不是。我想他们早就修好了。我猜不是。属性选择器在Chrome中通常是很坏的-请看（我第一次发现这个bug的地方），如果有人发现了这个bug，请注意Chrome已经修复了这个bug。我使用Chrome59，一切都很完美。