Search code examples
cssgoogle-chromecss-selectorshandlebars.js

Why doesn't css dataattribute selection hover respond in chrome within a handlebars template

I'm wanting to highlight the text in a particular column of a table red on hover.

I'm selecting the cells with data attribute 'data-highlight' like this:

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

This works fine until you try to do it within a handlebarsjs datatemplate.

Works in IE but not in chrome.

I have an example in jsfiddle:

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

When you hover over the items in the Job Title column in IE they turn red. This doesn't happen in chrome.

Can anyone explain why and suggest a fix?

Solution

  • This seems to be a bug in chrome, using the :hover selector in combination with td[attr] selector doesn't work.

    Here's minimal example that reproduces the bug: http://jsfiddle.net/q4u0zrn2/12/

    The example also has some workarounds: wrap your content in a div with the proper attribute or use a different selector, e.g. a class selector.