为什么 css 数据属性选择悬停在车把模板内的 chrome 中没有响应

Question

我想在鼠标悬停时以 table 红色突出显示特定列中的文本。

我正在选择具有数据属性 'data-highlight' 的单元格，如下所示：

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

除非您尝试在 handlebarsjs 数据模板中执行此操作，否则它工作正常。

在 IE 中有效，但在 chrome 中无效。

我在 jsfiddle 中有一个例子：

http://jsfiddle.net/q4u0zrn2/1/

当您将鼠标悬停在 IE 中职位名称列中的项目上时，它们会变成红色。这不会发生在 chrome.

谁能解释原因并提出修复建议？

Answer 1

这似乎是 chrome 中的错误，将 :hover 选择器与 td[attr] 选择器结合使用不起作用。

下面是重现错误的最小示例：http://jsfiddle.net/q4u0zrn2/12/

该示例还有一些解决方法：将您的内容包装在具有适当属性的 div 中或使用不同的选择器，例如class 选择器。

Answer 2

确实是 chrome 中的错误。

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

[data-highlight] {
    cursor:default;
}

查看您的固定样本： http://jsfiddle.net/q4u0zrn2/14/